javascript 将事件侦听器添加到具有特定类的当前和未来元素
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8459204/
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
Adding event listeners to current and future elements with a particular class
提问by sanity
With JQuery, is it possible to add an event listener to any element that currently, or will in the future, have a particular class?
使用 JQuery,是否可以向当前或将来具有特定类的任何元素添加事件侦听器?
I'm working on a project that makes heavy use of contentEditable, so the DOM is changing, and elements can have classes added and removed as a result of user input.
我正在开发一个大量使用 contentEditable 的项目,因此 DOM 正在发生变化,并且元素可以根据用户输入添加和删除类。
I would like to be able to say "elements of class X should do Y when clicked", but if I understand correctly, $(".X").click(Y) will only add the event listener to elements that currently have class X.
我希望能够说“点击 X 类的元素应该做 Y”,但如果我理解正确, $(".X").click(Y) 只会将事件侦听器添加到当前具有类的元素X。
Furthermore, if an element is no-longer part of class X, then it will still have the click event listener.
此外,如果一个元素不再属于 X 类,那么它仍然具有单击事件侦听器。
How can I do this?
我怎样才能做到这一点?
回答by Kevin Ennis
Yep. What you're talking about is called event delegation. Here's an example:
是的。您所说的称为事件委托。下面是一个例子:
$('#container').on('click', '.innerElement', function(){
/// Do stuff
});
In your case, #container
would be an element that is known to exist on page load which will contain the child elements you care about (either now or in the future). This approach takes advantage of event bubbling in the DOM.
在您的情况下,#container
将是一个已知存在于页面加载中的元素,它将包含您关心的子元素(现在或将来)。这种方法利用了 DOM 中的事件冒泡。
As another poster mentioned, the live method will also work -- but it has been deprecated in jQuery 1.7, and is generally not as performant as using more selective delegation (such as the example above).
正如另一张海报所提到的,live 方法也可以使用——但它在 jQuery 1.7 中已被弃用,并且通常不如使用更具选择性的委托(例如上面的示例)那样高效。
回答by nathan gonzalez
you'll want to use event delegation. jquery 1.7 has made this more abstract than previous versions, but it looks something like this:
你会想要使用事件委托。jquery 1.7 比以前的版本更抽象,但它看起来像这样:
$("#myWrappingElement").on("click", ".myclass", function(event){
alert($(this).text());
});
this basically adds a click event listener to the #myWrappingElement element, and jquery will automagically look to see what the original event target was and fire the proper function. this means you can add or remove .myclass elements and still have events fire on them.
这基本上向#myWrappingElement 元素添加了一个单击事件侦听器,jquery 将自动查看原始事件目标是什么并触发正确的函数。这意味着您可以添加或删除 .myclass 元素,并且仍然可以触发事件。
回答by gbuckingham89
the jQuery live() method swill allow to have a "live" action listener - so if new DOM elements match the selector, they will be attached to the action listener. For example:
jQuery live() 方法将允许有一个“实时”动作监听器——所以如果新的 DOM 元素与选择器匹配,它们将被附加到动作监听器。例如:
$(".X").live("click", function(){
alert('some action');
});
See the documentation here for more info: http://api.jquery.com/live/
有关更多信息,请参阅此处的文档:http: //api.jquery.com/live/
I'm not sure that the second part of your question about keeping the action listener attached after removing the class os possible - someone else might have a solution though.
我不确定您关于在删除类 os 后保持附加动作侦听器的问题的第二部分是否可能 - 不过其他人可能有解决方案。