关于javascript：将click事件附加到尚未添加到DOM的JQuery对象

Attaching click event to a JQuery object not yet added to the DOM

本问题已经有最佳答案，请猛点这里访问。

在将Click事件添加到DOM之前，我一直很难将它附加到jQuery对象。

基本上，我有一个函数返回的按钮，然后将它附加到DOM。我想要的是用自己的单击处理程序返回按钮。我不想从DOM中选择它来附加处理程序。

我的代码是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

createMyButton = function(data) {

var button = $('')
.css({
'display' : 'inline',
'padding' : '0px 2px 2px 0px',
'cursor' : 'pointer'
}).append($('').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之后)：

1
2
3

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

它起作用了…但不是为了我，不是我想要的。

它似乎与对象还不是DOM的一部分这一事实有关。

哦！顺便说一句，我正在使用Openlayers，我要附加按钮的DOM对象是Openlayers.framedcloud(它还不是DOM的一部分，但一旦触发了几个事件，它就会出现。)

相关讨论

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

1
2
3

$('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+

相关讨论

我刚刚尝试过这个方法，但它不起作用，似乎"on"方法必须与已经在DOM中的元素一起使用。.on()方法将事件处理程序附加到jquery对象中当前选定的元素集。"
它应该起作用。"在"replaces"live上，它将事件附加到当前/将来的选择器，这意味着任何具有id="my button"的元素都应该将该click事件附加到它上。
你能为我们做一把小提琴，看看到底是什么问题吗？
很抱歉，它确实有效，但使用"悬停"，而不是"点击"…我想知道为什么…
我做了一把小提琴来测试一下"点击"。jsfiddle.net/x8kcu/1
谢谢@wirey，我知道你在那里做了什么，但它仍然对我不起作用…我开始认为这与Openlayers和framedcloud有关…
我对你的变量"button"有点困惑。你到底在里面储存什么？看起来您正在选择("")元素？这就是你想要得到的吗？
实际上，我想要的是创建一个带有Openlayers的弹出窗口，并在里面放置一个按钮来显示关于我的地图的信息…由于弹出窗口是动态创建的，所以除了在移动中创建按钮，我别无选择。
像这把小提琴？jsfiddle.net/x8kcu/3
"您可以用dom ready上存在的任何父元素替换body"，这是关键，谢谢！
顺便问一下，这对你有用吗？因为它没有被标记为答案。
我刚用过这个，它起作用了。不确定它是否适用于OP，但它绝对是正确的。
不幸的是，这个解决方案并不理想，因为它要求我向要从中侦听事件的元素添加一个ID。我希望createMyButton函数返回一个元素，该元素已经有一个事件侦听器连接到它。这在jquery中是可能的吗？
@Ajedi32不一定-您只需要正确的CSS选择器来针对您的元素。你能详细解释一下你到底想做什么吗？
@？？？？？？？我已经通过等待元素添加到DOM以附加事件来解决了我的问题，但问题与此相关：github.com/ajedi32/html_checkers/blob/&hellip；我希望在实例化事件后立即将其绑定到HTMLCheckerPiece，即使它尚未添加到DOM。我不想将事件绑定到所有检查器片段，因为只有在单击单个检查器片段时才会触发该事件。
哎呀！为我工作，谢谢。
这是否可用于设置尚未添加的元素的属性？(在我的情况下选中一个复选框)
@jameswierzba不设置属性。这是为了绑定一个事件处理程序来监听动态元素。如果要设置元素的属性，可以在元素添加到DOM之后设置。如何添加复选框？
好吧，我想是的。该复选框是在对服务器进行Ajax调用后动态添加的，服务器将使用创建服务器所需的信息进行响应。我已经完成了您的建议，并在将输入添加到DOM之后对其进行了操作。
实际上，使用.on()通常是一种可行的方法，但它并不总是像应该的那样工作。我目前使用的是FF 47.0和JQuery1.12，并且事件不会在最近加载的DOM内容上触发。不过，最初加载的DOM内容会触发它。在这种情况下，您可能需要创建一个特定的事件处理程序，例如，在回调中实时加载后，该处理程序将监听对象。注意，这样就很容易让偶数个监听器倍增，并创建大量重复的呼叫集…
把.each()加到.on()里怎么样？

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

1
2
3

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

如果您不确定当时该页面上的元素，只需将其附加到document即可。

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

相关讨论

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

1
2
3

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

相关讨论

尝试：

1
2
3
4
5
6
7
8

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

jfiddle示例。

当使用.on()并绑定到动态元素时，需要引用页面上已经存在的元素(如示例中的body)。如果可以使用更具体的元素来提高性能。

Event handlers are bound only to the currently selected elements; they
must exist on the page at the time your code makes the call to .on().
To ensure the elements are present and can be selected, perform event
binding inside a document ready handler for elements that are in the
HTML markup on the page. If new HTML is being injected into the page,
select the elements and attach event handlers after the new HTML is
placed into the page. Or, use delegated events to attach an event
handler, as described next.

网址：http://api.jquery.com/on/

相关讨论

你必须附加它。创建元素时使用：

1
2
3

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

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

看看这里的例子，这里是一个简单的版本。

相关讨论

为那些使用.on()来监听最近加载的表单元格中输入绑定的事件的人提供补充信息；我通过使用delegate()设法将事件处理程序绑定到此类表单元格，但是.on()不起作用。

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

例如

HTML

1
2
3
4
5
6

JQuery

1
2
3

$('#mytable').delegate('click', 'name^=["qty_"]', function() {
console.log("you clicked cell #" . $(this).attr("name"));
});

关于事件

1
2
3

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

或在追加后添加事件

相关讨论

方法用于绑定事件，即使在页面加载时不存在元素。这是链接使用方法如下：

1
2
3

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

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

使用。为你工作？

1	$("#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/

相关讨论

也许bind()可以帮助：

1
2
3

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

相关讨论