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

Question

在将Click事件添加到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;     
}

返回的按钮无法捕获click事件.但是,如果我这样做(在将按钮添加到DOM之后):

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

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

它似乎与该对象尚未成为DOM的一部分有关.

哦! 顺便说一句,我正在使用OpenLayers,我正在附加按钮的DOM对象是一个OpenLayers.FramedCloud(它还不是DOM的一部分,但会触发几个事件.)

Answer 1

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

$('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(事件,选择器,数据,处理程序); // jQuery 1.7+

Answer 2

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

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

如果您不确定当时该页面上将包含哪些元素,请将其附加到document.

注意:从性能角度来看,这是次优的 - 要获得最大速度,应该尝试连接到将要插入的元素的最近父元素.

Answer 3

试试这个......用父选择器替换身体

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

Answer 4

尝试:

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

jsfiddle的例子.

使用.on()并绑定到动态元素时,需要引用页面上已存在的元素(如示例中的body).如果您可以使用更具体的元素来提高性能.

事件处理程序仅绑定到当前选定的元素; 它们必须存在于您的代码调用.on()时的页面上.要确保元素存在且可以选择,请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定.如果将新HTML注入页面,请在将新HTML放入页面后选择元素并附加事件处理程序.或者,使用委托事件来附加事件处理程序,如下所述.

Src:http://api.jquery.com/on/

Answer 5

你必须追加它.用以下内容创建元素:

var $div = $("<div>my div</div>");
$div.click(function(){alert("clicked")})
return $div;

然后,如果你追加它将工作.

看看你的例子这里和一个简单的版本在这里.