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

javascript jquery onclick jquery-events

2022-08-30 01:43:33

在将单击事件附加到JQuery对象之前，我遇到了很多麻烦。

基本上，我有这个按钮，我的函数返回，然后我把它附加到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的一部分，但一旦触发了几个事件，它就会被激活。

答案 1

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

$('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）;j查询 1.3+

$（document）.delegate（selector， events， data， handler）;jQuery 1.4.3+

$（document）.on（events， selector， data， handler）;j查询 1.7+

答案 2

我真的很惊讶还没有人发布这个

$(document).on('click','#my-butt', function(){
   console.log('document is always there');
})

如果您不确定当时该页面上将有哪些元素，只需将其附加到。document

注意：从性能角度来看，这是次优的 - 为了获得最大速度，应尝试附加到要插入的元素的最近父级。