提问人：Kelvin 提问时间：8/22/2009 最后编辑：TylerHKelvin 更新时间：11/16/2023 访问量：551699
多个元素的 jQuery 相同单击事件
jQuery same click event for multiple elements
问：
有没有办法对页面上的不同元素执行相同的代码？
$('.class1').click(function() {
some_function();
});
$('.class2').click(function() {
some_function();
});
而是做这样的事情：
$('.class1').$('.class2').click(function() {
some_function();
});
答：
990赞
Eevee
8/22/2009
#1
$('.class1, .class2').on('click', some_function);
艺术
$('.class1').add('.class2').on('click', some_function);
这也适用于现有对象：
const $class1 = $('.class1');
const $class2 = $('.class2');
$class1.add($class2).on('click', some_function);
评论
12赞
Brett Weber
5/23/2013
为了帮助开发人员记住这一点，即使使用更多的伪类进行扩展，它也与定义样式时应用 css 选择器的格式相同
9赞
Vivek S
6/6/2014
如果 class2 像这样缓存 var class2=$（“.class2”） 怎么办？
25赞
Eevee
6/6/2014
@NeverBackDown也适用于 jQuery 对象.add()
3赞
Ben Sewards
8/7/2014
请注意，这仍将事件附加到存在的 jquery 对象，即使其中一个选择器返回 undefined。
3赞
Taufik Nur Rahmanda
3/23/2017
有人可以解释一下 和 之间的真正区别是什么吗？在什么情况下我们应该使用？$('.class1, .class2')$('.class1').add('.class2').add()
19赞
code_burgar
8/22/2009
#2
只需用于多个选择器。此外，您不需要 lambda 函数即可将现有函数绑定到 click 事件。$('.myclass1, .myclass2, .myclass3')
评论
7赞
Maurizio In denmark
7/4/2013
逗号后需要一个空格
49赞
coolguy
8/25/2011
#3
$('.class1, .class2').click(some_function);
确保你放一个像$（'.class1，space here.class2'）这样的空格，否则它将不起作用。
146赞
bzin
7/11/2014
#4
我通常用 代替 .它允许我向特定函数添加更多事件侦听器。onclick
$(document).on("click touchend", ".class1, .class2, .class3", function () {
//do stuff
});
评论
1赞
Gaurav Ojha
1/4/2017
我更喜欢这种方式。但是，您可以在同一声明中按类定位一个元素，按 ID 定位一个元素吗？例如，$（document）.on（“click touchend”， “.class1， #id1， .class3”， function （） { //做事 }）;
3赞
Obed Parlapiano
1/26/2017
一年后：是的，你可以！@GauravOjha
7赞
Jonathan Lidbeck
4/26/2017
这种技术（创建委托的而不是直接的处理程序）还具有处理由注册处理程序后创建的匹配元素触发的事件的独特优势。请参见：api.jquery.com/on
11赞
pim
4/7/2015
#5
另一种选择是，假设你的元素被存储为变量（如果你在一个函数体中多次访问它们，这通常是一个好主意）：
function disableMinHeight() {
var $html = $("html");
var $body = $("body");
var $slideout = $("#slideout");
$html.add($body).add($slideout).css("min-height", 0);
};
利用 jQuery 链接并允许您使用引用。
1赞
Andrii Bogachenko
12/1/2016
#6
我有一个指向包含许多输入字段的对象的链接，这需要由同一事件处理。因此，我只需使用 find（） 来获取所有内部对象，这些对象需要具有事件
var form = $('<form></form>');
// ... apending several input fields
form.find('input').on('change', onInputChange);
如果您的对象在下一级，则可以使用链接 children（） 而不是 find（） 方法。
5赞
Nitin Pawar
12/28/2016
#7
我们也可以像下面这样编码，我在这里使用了模糊事件。
$("#proprice, #proqty").blur(function(){
var price=$("#proprice").val();
var qty=$("#proqty").val();
if(price != '' || qty != '')
{
$("#totalprice").val(qty*price);
}
});
1赞
Arkhaine
7/24/2017
#8
除了上面的优秀示例和答案之外，您还可以使用它们的类对两个不同的元素进行“查找”。例如：
<div class="parent">
<div class="child1">Hello</div>
<div class="child2">World</div>
</div>
<script>
var x = jQuery('.parent').find('.child1, .child2').text();
console.log(x);
</script>
这应该输出“HelloWorld”。
4赞
Sam
9/26/2017
#9
添加一个逗号分隔的类列表，如下所示：
jQuery(document).ready(function($) {
$('.class, .id').click(function() {
// Your code
}
});
9赞
frzsombor
3/21/2019
#10
如果您已经或希望将元素保留为变量（jQuery 对象），也可以遍历它们：
var $class1 = $('.class1');
var $class2 = $('.class2');
$([$class1,$class2]).each(function() {
$(this).on('click', function(e) {
some_function();
});
});
评论