jQuery鼠标位置和调用动态创建元素的单击事件

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

我有两个问题，一个是我无法正确使用mousePositions。另一个是我希望在点击没有发生的动态创建的div时调用函数showOptions。

Answer 1

• 首先定义showOptions
• 使用函数声明而不是函数表达式1
• 有a simpler syntax for creating DOM elements

---

$('body').click(function (event)
{
    var x = event.pageX - this.offsetLeft,
        y = event.pageY - this.offsetTop;

   function showOptions()
   {
       alert('santa clara');
   }

   $('<div/>',
   {
       'class': 'node',
       css: {
           position: 'absolute',
           top: x,
           left: y
       },
       click: showOptions
   }).appendTo(this);
});

Answer 2

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

document.body没有offsetLeft和offsetTop，因为它是页面本身 - 它从(0, 0)开始。你不是只想要event.pageX和Y吗？这也与position: absolute像素相对应。

其次，您在之后定义showOptions函数，并将其分配给.bind。所以它不可用尚未。

我还添加了一些技巧，以便代码更具可读性：

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

});