绑定点击事件后鼠标位置移动

Question

我正在绑定点击事件以生成内容可编辑的文本框。 以下是我用来实现的代码

$('.clickable-div').bind('click', function(ev) {                                                
                                    var $div = $(ev.target);
                                    var offset = $div.offset();
                                    var x = ev.clientX - offset.left;
                                    var y = ev.clientY - offset.top;

                                    $("#main-div")
                                            .append(
                                    '<div class="handle bar"  style="top:'+y+'px;left:'+x+'px">'); 
                                                             });

问题是当我点击页面时，文本框按预期显示，但鼠标位置突然移动到页面上的另一个位置。 此意外行为也仅在以下两个条件下发生：

1）当在文本框中写入内容然后进行新的单击以生成另一个文本框时。

2）滚动页面时，旧文本框不再可见。

以下是理想案例和错误案例的快照

任何帮助将不胜感激。