[英]jquery on('click') handler for multiple elements referenced by vars
注意我知道我添加了 id 并将它们组合在一个选择器中,例如“#myDiv1,#myDiv2”,所以请不要提出这个建议,因为它与我的问题无关。
有没有办法在一个 on() 声明中将下面的变量“链接”在一起,可能作为数组或其他东西?
var myDiv1 = $('<div>Something here</div>');
var myDiv2 = $('<div>Something else here</div>');
myDiv1.on('click', function(){ doSomething();});
myDiv2.on('click', function(){ doSomething();});
我有一堆 vars,我需要对鼠标事件进行一些广泛的跟踪,并且像上面的例子一样单独设置它们感觉很乱。
您可以将DOM元素数组传递给jQuery函数 :
$([ myDiv1.get(0), myDiv2.get(0) ]).on('click', function(){ doSomething();});
另一种可能的方法是使用.add()
方法 :
myDiv1.add(myDiv2).on('click', function(){ doSomething();});
将它们放入数组中,遍历它们并附加相同的处理程序。 我使用ES5 forEach
进行了示例,但可以随时使用简单的for
循环或$.each
。
[cucc, gomb].forEach(function (el) { el.on('click', handler); });
如果他们有一个共同的祖先,则在他们身上放一个共同的类,并使用事件委托 。 根据您元素的数量,这可能是性能最佳的解决方案,因为您只需要将一个处理程序附加到公共祖先即可。
$('.ancestor').on('click', '.common', handler);
添加到卡帕的答案。 如果您需要绑定已添加、前置、附加、加载的多个元素,请使用 ajax 或 javascript。
遍历多个类并为“每个”元素创建绑定
var thisButton = '.this-button', //This element was added by js
thatButton = '.that-button', //That element was added by ajax
thesebuttons = [thisButton, thatButton];
thesebuttons.forEach(function (button) {
$(document).on('click touchend', button, function (e) {
// 'e' or event, uncomment to prevent button's default event
// e.preventDefault();
// Now do your function stuff
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.