Положение мыши 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");
    }
});

У меня есть две проблемы, одна из которых заключается в том, что я не могу получить правильную позицию мыши. Другое дело, что я хочу вызывать функцию showOptions по нажатию динамически созданного div, которого не происходит.

Answer 1

• Определить showOptions первый
• Использовать объявление функции, а не выражение функции] 1
• Существует более простой синтаксис для создания элементов DOM

---

$('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");

});