I am binding a click event to generate a content-editable textbox. Following is the code which I use to achieve that
$('.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">');
});
The problem is when I click on the page, the textbox appears as expected but the mouse position moves abruptly to another location on the page. Also this unexpected behaviour occurs only under following two conditions together:
1) When something is written in the text box and then new click is made to generate another text box.
2) When page is scrolled and the old textbox is no more visible.
Below are the snapshots of the ideal and the faulty cases
Any help will be appreciated.