Question

Im working on a text editor simulation that appends an input to a div, and extracts its values to create spans, here is the initial click() function:

var $cursorStart= $("#cursor-start");

$("#main-edit").click( function() {
var cursorExists = $("#cursor").length;
if (!cursorExists){
   $cursorStart.append("<input type='text' id = 'cursor' />");
   $("#cursor").markCursor();

}
   if (cursorExists){
    $("#cursor").focus();

}

});

When I start typing, spans are inserted before the input:

jQuery.fn.enterText = function(e){
var $cursor = $("#cursor");
if( $cursor.val() && e.keyCode != 32  ){
    var character = $("#cursor").val();
    $cursor.val("");
    character = character.split("").join("</span><span class='text'>");
    $("<span class = 'text'>"+character+"</span>").insertBefore($cursor);



}

What I want to know now is, how can I move the input (cursor) around (basically be inserted after a clicked span).

<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>

clicking near a and b would result in an input after “a”. These are spans that are dynamically added.

Answer 1

After adding the new span, you can bind a new click event to it:

$("<span class = 'text'>"+character+"</span>").insertBefore($cursor);

$cursor.prev().click(function(){
  $(this).after($cursor);
});

You could also use jQuery’s .live() function, but this is generally not a good solution because it is so expensive.