附加click事件没有被添加到DOM一个jQuery对象[复制]附加click事件没有被添加到DOM

这个问题已经在这里有一个答案：

• 事件绑定的动态创建的元素吗？ 23个回答

我一直有很多麻烦安装的点击事件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;     
}

该按钮是回报是无法赶上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').on('click', '#my-button', function () {
     console.log("yeahhhh!!! but this doesn't work for me :(");
});

看看这里http://api.jquery.com/on/关于如何使用上（），因为它取代了生活）为1.7+更多信息（。

下面列出的是哪个版本，你应该使用

$（选择）.live（事件，数据，处理程序）; // jQuery的1.3+

（文档）$ .delegate（选择，事件，数据，处理程序）; // jQuery的1.4.3+

$（文件）。在（活动，选择，数据处理程序）; // 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 。

当使用。对（），并结合动态的元素，你需要参考已经在网页上不存在（如身体中的例子）的元素。 如果您可以使用，将提高性能更具体的元素。

事件处理程序是仅结合到当前选择的元素; 它们必须存在在页面上当时您的代码调用。对（）。 为了确保元件存在，并且可以选择，执行事件文件准备处理程序内对于那些在页面上的HTML标记元素结合。 如果新的HTML被注入页面中，选择元素和附加的事件处理程序的新的HTML被放置到页面后。 或者，使用委派事件附加一个事件处理程序，如下所述。

源： http://api.jquery.com/on/

Answer 5:

你必须将其追加。 与创建元素：

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

然后，如果你追加它将工作。

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

Answer 6:

事件

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

或追加后添加事件

Answer 7:

是否使用.live为你工作？

$("#my-button").live("click", function(){ alert("yay!"); }); 

http://api.jquery.com/live/

编辑

在jQuery 1.7的，所述.live（）方法被弃用。 使用。对（）附加的事件处理程序。 旧版本的jQuery的用户应使用.delegate（）优先于.live（）。

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

Answer 8:

jQuery的。对方法用于结合事件，即使没有元件的上页负载的存在。 这里是连接它以这种方式使用：

 $("#dataTable tbody tr").on("click", function(event){
    alert($(this).text());
 });

jQuery的1.7，之前。 生活（）使用方法，但它现在已经过时了。

Answer 9:

对于那些谁使用。对（）听绑定在最近加载表格单元格输入事件的人的信息的补充; 我设法通过委托（）绑定的事件处理程序，以这样的表格单元格，但。对（）是行不通的。

我所结合的表id来.delegate（）和用于描述该输入的选择器。

如

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"));
});

Answer 10:

也许结合（）将帮助：

button.bind('click', function() {
  alert('User clicked');
});

文章来源: Attaching click event to a JQuery object not yet added to the DOM [duplicate]