184

在将单击事件添加到 DOM 之前，我一直在将单击事件附加到 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 的一部分，但一旦触发了几个事件，它将是。）

4

10 回答 10

298

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

$('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()。

下面列出了您应该使用的版本

$(选择器).live(事件、数据、处理程序); // jQuery 1.3+

$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+

$(document).on(事件、选择器、数据、处理程序); // jQuery 1.7+

于 2012-06-06T19:01:28.253 回答
41

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

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

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

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

于 2015-10-08T14:07:10.380 回答
23

试试这个......用父选择器替换正文

$('body').on('click', '#my-button', function () {
    console.log("yeahhhh!!! but this doesn't work for me :(");
});
于 2012-06-06T18:59:25.410 回答
9

尝试：

$('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 放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。

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

于 2012-06-06T19:02:57.493 回答
8

你必须附加它。使用以下命令创建元素：

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

然后，如果您附加它将起作用。

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

于 2015-01-15T18:58:20.993 回答
1

为那些使用 .on() 侦听绑定在最近加载的表格单元格内的输入上的事件的人补充信息；我设法使用delegate() 将事件处理程序绑定到此类表格单元格，但.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"));
});
于 2017-09-11T04:41:48.557 回答
0

使用 .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/

于 2012-06-06T18:58:03.550 回答
0

活动现场

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

或在追加后添加事件

于 2012-06-06T19:01:50.090 回答
0

jQuery .on 方法用于绑定事件，即使页面加载时不存在元素。这是链接 它是这样使用的：

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

在 jquery 1.7 之前，. 使用了live()方法，但现在已弃用。

于 2012-06-06T19:09:25.460 回答
-3

也许 bind() 会有所帮助：

button.bind('click', function() {
  alert('User clicked');
});
于 2012-06-06T19:02:46.370 回答