将click事件附加到尚未添加到DOM的JQuery对象上[重复]

在将click事件附加到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的一部分，但是一旦触发了两个事件，便会成为该对象）。

用这个。您可以使用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（事件，数据，处理程序）; // jQuery 1.3+

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

$（document）.on（事件，选择器，数据，处理程序）; // jQuery 1.7以上

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

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

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

注意：从性能角度来看，这不是最佳选择-要获得最大速度，应尝试将其连接到将要插入的元素的最近父元素。

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

$('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（）并绑定到动态元素时，您需要引用页面上已经存在的元素（如示例中的body）。如果可以使用更具体的元素来提高性能。

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

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

您必须附加它。使用以下方法创建元素：

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

或在追加后添加事件

为那些使用.on（）来监听最近加载的表格单元内输入上绑定的事件的人们提供的信息补充；我设法通过使用委托（）将事件处理程序绑定到此类表单元，但是.on（）无效。

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

使用.live对您有用吗？

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

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

编辑

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。较旧版本的jQuery的用户应优先使用.delegate（）而不是.live（）。

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

jQuery .on方法用于绑定事件，即使页面加载时没有元素也是如此。这是链接，
它的使用方式如下：

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

在jQuery 1.7之前，。使用了live（）方法，但现在不建议使用。

也许bind（）会有所帮助：

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

本文地址：http://javascript.askforanswer.com/jiangclickshijianfujiadaoshangweitianjiadaodomdejqueryduixiangshangzhongfu.html
文章标签：javascript , javascript-events , jquery , onclick
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

文件下载