在jquery中，将输入放在最近的范围（如果存在）之后

我目前有一个函数，它向#cursor start div追加一个“input”：

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();

}

var$cursorStart=$（“#游标开始”）；
$（“#主编辑”）。单击（函数（）{
var cursorExists=$（“#cursor”）.length；
如果（！cursorExists）{
$cursorStart.append（“”）；
$（“#游标”）.markCursor（）；
}
if（cursorExists）{
$（“#光标”）.focus（）；
}

我现在要做的是在最近的范围（如果它存在）之后添加输入。键入时会调用其他名为enterText和markCursor的函数：

jQuery.fn.markCursor = function(e){
    $(this).focus();
   $(this).keyup(function(e) {
  $cursorStart.enterText(e);

});

};

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);



}
    });

jQuery.fn.markCursor=函数（e）{
$（this.focus（）；
$（此）.keyup（函数（e）{
$cursorStart.enterText（e）；
});
};
jQuery.fn.enterText=函数（e）{
var$cursor=$（“#cursor”）；
如果（$cursor.val（）&&e.keyCode！=32）{
var character=$（“#游标”）.val（）；
$cursor.val（“”）；
character=character.split（“”）.join（“”）；
$（“”+字符+“”）。在（$cursor）之前插入；
}
});

我现在想根据用户单击的位置来定位输入，这里.offset（）或.position（）是否有帮助

HTML:

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

a
B
C
D

---

在a和b附近单击会导致在“a”之后输入，而不是在“主编辑”上侦听单击，而是在

span

上侦听单击：

$('#main-edit span').click(function() {
    $(this).after('<input type="text" id="cursor" />');
});

---

这是小提琴：

$('#main-edit').delegate('span', 'click', function() {
    $(this).after('<input type="text" id="cursor" />');
});