将点击事件附加到尚未添加到DOM的JQuery对象
在将它添加到DOM之前，将click事件附加到JQuery对象上，我遇到了很多麻烦。
基本上我有这个button，我的函数返回，然后我将它追加到DOM。 我想要的是返回与自己的点击处理程序的button。 我不想从DOM中select它来附加处理程序。
我的代码是这样的：
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="csshttp://img.dovov.comFacebook-icon.png">').css({ "padding-top" : "0px", "margin-top" : "0px", "margin-bottom" : "0px" }))); button.click(function () { console.log("asdfasdf"); }); return button; } 返回的button无法捕捉点击事件。 但是，如果我这样做（在button被添加到DOM后）：
$('#my-button').click(function () { console.log("yeahhhh!!! but this doesn't work for me :("); });
它的作品…但不是我，不是我想要的。
我花了几个小时试图做这个工作，这似乎与这个对象还不是DOM的一部分有关。 任何帮助将是非常apreciated。
哦! 顺便说一句，我正在使用OpenLayers，而我附加button的DOM对象是一个OpenLayers.FramedCloud（Wich还不是DOM的一部分，但是会触发几个事件）。
用这个。 您可以使用dom中已有的父元素replacebody
$('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+
我真的很惊讶，没有人发布这个呢
$(document).on('click','#my-butt', function(){ console.log('document is always there'); })
如果您不确定该页面上的元素将会附加到document 。
注意：从性能angular度来看这是次优的 – 为了获得最大速度，应该尝试附加到要插入的元素的最近父元素。
试试这个….用父母select器replace身体
$('body').on('click', '#my-button', function () { console.log("yeahhhh!!! but this doesn't work for me :("); });
尝试：
$('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（）并绑定到dynamic元素时，您需要引用页面上已存在的元素（如示例中的body）。 如果您可以使用更具体的元素来提高性能。
事件处理程序仅绑定到当前选定的元素; 它们必须在代码调用.on（）时存在于页面上。 为确保元素存在且可以select，请在文档就绪处理程序中为页面上的HTML标记中的元素执行事件绑定。 如果将新的HTML注入页面，请在将新的HTML放入页面后select元素并附加事件处理程序。 或者，使用委托事件来附加事件处理程序，如下所述。
Src： http : //api.jquery.com/on/
你必须追加它。 创build元素：
var $div = $("<div>my div</div>"); $div.click(function(){alert("clicked")}) return $div;
那么如果你追加它将工作。
看看你的例子， 这里是一个简单的版本。
在事件
$('#my-button').on('click', function () { console.log("yeahhhh!!! but this doesn't work for me :("); });
或者在追加后添加事件
是否使用.live为你工作？
$("#my-button").live("click", function(){ alert("yay!"); });
编辑
从jQuery 1.7开始，.live（）方法已被弃用。 使用.on（）附加事件处理程序。 老版本的jQuery用户应该优先使用.delegate（）.live（）。
jQuery .on方法用于绑定事件，即使页面加载时不存在元素。 这里是链接它以这种方式使用：
$("#dataTable tbody tr").on("click", function(event){ alert($(this).text()); });
在jquery 1.7之前， live（）方法被使用，但现在已经被弃用了。
对那些使用.on（）来监听新近加载的表格单元格内的input绑定事件的人的补充信息; 我设法通过使用委托（），绑定事件处理程序到这样的表格单元格，但.on（）将无法正常工作。
我将表ID绑定到.delegate（），并使用了描述input的select器。
例如
HTML
<table id="#mytable"> <!-- These three lines below were loaded post-DOM creation time, using a live callback for example --> <tr><td><input name="qty_001" /></td></tr> <tr><td><input name="qty_002" /></td></tr> <tr><td><input name="qty_003" /></td></tr> </table>
jQuery的
$('#mytable').delegate('click', 'name^=["qty_"]', function() { console.log("you clicked cell #" . $(this).attr("name")); });
也许bind（）会帮助：
button.bind('click', function() { alert('User clicked'); });
