Question

jQuery("body").dblclick(function(event){ 
    var x = event.pageX - this.offsetLeft;
    var y = event.pageY - this.offsetTop;
    jQuery("<div></div>").addClass("node").css("position","absolute")
        .css("top",x).css("left",y).bind("click",showOptions).appendTo("body");
        
    var showOptions = function()
    {
        alert("santa clara");
    }
});

I have two problems here one is that I am not able to get the mousePositions right. Other is that I am wishing to call function showOptions on click of dynamically created div that’s not happening.

Answer 1

var x = event.pageX - this.offsetLeft;
var y = event.pageY - this.offsetTop;

The document.body has no offsetLeft and offsetTop as it is the page itself – it starts at (0, 0). Don’t you simply want event.pageX and Y perhaps? That will also correspond with position: absolute pixels.

Secondly, you define yourshowOptions function after you assign it to .bind. So it’s not available yet.

I also added some tricks so that the code is a little more readable:

jQuery("body").dblclick(function(event){ 
    var showOptions = function()
    {
        alert("santa clara");
    };

    var x = event.pageX,
        y = event.pageY;

    jQuery("<div>").addClass("node")
                   .css({position: "absolute",
                         left:     x,
                         top:      y })
                   .click(showOptions)
                   .appendTo("body");

});