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

在将 click 事件添加到 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 的一部分，但是一旦触发了几个事件，它就会成为 DOM 的一部分。)

168787 次浏览
小开

使用。生活为你工作吗？

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

Http://api.jquery.com/live/

剪辑

在 jQuery 1.7中,。不推荐使用 live ()方法。使用。对()附加事件处理程序。旧版本 jQuery 的用户应该使用。优先于... 的委托()。现场直播。

Http://api.jquery.com/on/

小开

试试这个... . 用父选择器替换 body

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

使用这个。你可以用存在于 dom ready 上的任何父元素来替换 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 ()。

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

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

$(document) . committee (selector，events，data，handle) ;//jQuery 1.4.3 +

$(document) . on (events，selector，data，handle) ;//jQuery 1.7 +

小开

以防万一

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

或者在追加之后添加事件

小开

也许 bind ()会有所帮助:

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

试试:

$('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 之后附加事件处理程序 或者，使用委托的事件来附加事件 处理程序，如下所述。

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

小开

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

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

在 jquery 1.7之前，使用的是. 现场直播方法，但是现在已经不再使用它了。

小开

您必须添加它。用以下方法创建元素:

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

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

看看你的例子 给你和一个简单的版本 给你。

小开

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

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

如果您不确定什么元素将在该页面上的时候只是附加到 document。

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

小开

为那些使用。On ()来监听在最近加载的表单元格中的输入上绑定的事件; 我设法通过委托()将事件处理程序绑定到这样的表单元格，但是。没用的。

我将表 id 绑定到. committee () ，并使用了一个描述输入的选择器。

例如:。

超文本标示语言

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

提交答案