javascript - 将单击事件附加到尚未添加到 DOM 的 JQuery 对象

Question

这个问题在这里已经有了答案:

Event binding on dynamically created elements? (23 个回答)

关闭 5年前。

在将点击事件添加到 JQuery 对象之前，我在将其添加到 DOM 之前遇到了很多麻烦。

基本上我有这个按钮让我的函数返回，然后我将它附加到 DOM。我想要的是用自己的点击处理程序返回按钮。我不想从 DOM 中选择它来附加处理程序。

我的代码是这样的:

createMyButton = function(data) {

  var button = $('<div id="my-button"></div>')
    .css({
       'display' : 'inline',
       'padding' : '0px 2px 2px 0px',
       'cursor' : 'pointer'
     }).append($('<a>').attr({
       //'href' : Share.serializeJson(data),
       'target' : '_blank',
       'rel' : 'nofollow'
     }).append($('<image src="css/images/Facebook-icon.png">').css({
       "padding-top" : "0px",
       "margin-top" : "0px",
       "margin-bottom" : "0px"
     })));

     button.click(function () {
        console.log("asdfasdf");
     });

     return button;     
}

返回的按钮无法捕捉到点击事件。但是，如果我这样做(在按钮添加到 DOM 之后):

$('#my-button').click(function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});

它有效...但不适合我，不是我想要的。

这似乎与对象还不是 DOM 的一部分有关。

哦!顺便说一句，我正在使用 OpenLayers，并且我将按钮附加到的 DOM 对象是 OpenLayers.FramedCloud (它还不是 DOM 的一部分，但一旦触发了几个事件就会成为。)

Answer 1

使用这个。您可以将 body 替换为 dom 就绪上存在的任何父元素

$('body').on('click', '#my-button', function () {
     console.log("yeahhhh!!! but this doesn't work for me :(");
});

看这里http://api.jquery.com/on/有关如何使用 on() 的更多信息，因为它从 1.7+ 开始替换 live()。

下面列出了您应该使用的版本

$(selector).live(events, data, handler); // jQuery 1.3+

$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+

$(document).on(events, selector, data, handler); // jQuery 1.7+