jQuery - 如何将事件绑定到稍后将显示的隐藏元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5655565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - How do I bind events to hidden elements that will be shown later?
提问by Nick
I am trying to attach 'click' events to all elements of a particular class. The problem is some of the elements are on a tab that is hidden (display: none) at the time that the event is bound. (.bind()). It seems that when these elements are shown the events are no longer bound.
我试图将“点击”事件附加到特定类的所有元素。问题是某些元素位于事件绑定时隐藏（显示：无）的选项卡上。(.bind())。似乎当显示这些元素时，事件不再受约束。
$('a.someClass').bind('click', function(){
alert("test");
});
The hidden elements do not appear to have a click event bound. If I select the hidden elements:
隐藏元素似乎没有单击事件绑定。如果我选择隐藏元素：
$('a.someClass:hidden').bind('click', function(){
alert("test");
});
It seems the click event is not bound when these elements are no longer hidden. Has anyone experienced this? Is there a way to bind and event to elements irregardless of their display property?
当这些元素不再隐藏时，似乎单击事件不受约束。有没有人经历过这个？有没有办法绑定和事件到元素而不管它们的显示属性如何？
Thanks
谢谢
采纳答案by Damb
edit 2 years later: As some people pointed out, the Livefunction is now deprecated (as you can also see at the top of the linked docs page). The right event handler name for the current version would be On. See Maxim's answer for a good example.
2 年后编辑：正如一些人指出的那样，该Live功能现已弃用（您也可以在链接的文档页面顶部看到）。当前版本的正确事件处理程序名称是On. 有关一个很好的例子，请参阅 Maxim 的回答。
Original answer:
Have you tried using Live()?
原始答案：
您是否尝试过使用Live()？
.live('click',function(){/* code */});
?
?
version note: livehas been deprecated in jQuery 1.7 and it was removed in jQuery 1.9. This answer is only correct for jQuery versions older than jQuery 1.7
版本说明：live已在 jQuery 1.7 中弃用，并在 jQuery 1.9 中删除。此答案仅适用于早于 jQuery 1.7 的 jQuery 版本
回答by Maxim McNair
As of jQuery 1.7, the .live()method is deprecated.
从 jQuery 1.7 开始，该.live()方法已被弃用。
You can now use the .on()method. By attaching a delegated event to an element that is viewable in the HTML when the jQuery is run.
您现在可以使用该.on()方法。通过将委托事件附加到在 jQuery 运行时可在 HTML 中查看的元素。
So if a.someClassis hidden when jQuery is run, you should attach a delegated event to the body, so it will run when there is a viewable a.someClasselement in the future, for example:
所以如果a.someClassjQuery 运行时隐藏，你应该将一个委托事件附加到主体，这样它就会a.someClass在将来有可见元素时运行，例如：
$('body').on('click','input.a.someClass',function(){
alert("test");
});
回答by Ady Ngom
Use delegate (note this is after you unhide them):
使用委托（注意这是在你取消隐藏之后）：
$('body').delegate('.someClass', 'click', function (evt) {
// do something here
});
回答by Vipin
Use
用
$('parentelement').on('click','taget element',function(){
})
parentelementshould be visible at page load
parentelement应该在页面加载时可见
回答by joe_coolish
According to the jquery documentation at http://api.jquery.com/live/
根据http://api.jquery.com/live/上的 jquery 文档
Attach a handler to the event for all elements which match the current selector, now and in the future
将处理程序附加到与当前选择器匹配的所有元素的事件中，现在和将来
Here is an example of how to use it:
以下是如何使用它的示例：
<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; font-weight:bold; cursor:pointer;
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<p>Click me!</p>
<span></span>
<script>
$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
</script>
</body>
</html>
回答by dylan maxey
Times have changed, it would now be done using ".on"
时代变了，现在可以使用“.on”来完成
.on('click',function(){/* code */});
.on('click',function(){/* code */});
