使用jQuery为多个元素设置相同的点击事件

12 浏览
0 Comments

使用jQuery为多个元素设置相同的点击事件

有没有办法在页面上的不同元素上执行相同的代码？\n

$('.class1').click(function() {
   some_function();
});
$('.class2').click(function() {
   some_function();
});

\n而不是像这样做：\n

$('.class1').$('.class2').click(function() {
   some_function();
});

\n谢谢。

0

3 答案

0 Comments

问题的出现原因：使用jQuery给多个元素绑定相同的点击事件时，可能会出现事件绑定失效的问题。

解决方法：确保在元素选择器中使用逗号分隔的多个类名之间有空格，否则事件绑定可能不会起作用。

在使用jQuery给多个元素绑定相同的点击事件时，我们可以使用类选择器来选择多个元素，并使用逗号将它们分隔开，如下所示：

$('.class1, .class2').click(some_function);

然而，需要注意的是，在类名之间必须有一个空格，否则事件绑定可能会失效。

例如，下面的代码中没有在两个类名之间添加空格：

$('.class1,space here.class2').click(some_function);

这种写法是错误的，事件绑定将无法正常工作。因此，正确的写法应该是：

$('.class1, .class2').click(some_function);

通过在类名之间添加空格，我们可以确保事件绑定能够正确地应用于多个元素，从而实现相同的点击事件。

0
0 Comments

问题原因：jQuery的同一点击事件绑定多个元素时，可以使用on方法，但是有人想知道是否可以同时通过类和ID来指定元素。

解决方法：可以通过在on方法的选择器中使用逗号分隔类和ID来同时指定多个元素。例如：

$(document).on("click touchend", ".class1, #id1, .class3", function () {
     //do stuff
});

这样就可以同时绑定类为class1和class3的元素，以及ID为id1的元素。

一年后，有人回答说是可以的。这种技术创建了一个委托处理程序，而不是直接处理程序，还提供了一个独特的优势，可以处理在注册处理程序之后创建的匹配元素触发的事件。

更多内容可以参考api.jquery.com/on的官方文档。

0
0 Comments

jQuery同一个点击事件适用于多个元素的问题在开发中经常遇到。问题的出现是因为需要给多个元素绑定相同的点击事件，但是选择器的书写方式有多种，开发人员可能会困惑应该选择哪种方式。以下是这个问题的解决方法。

一种解决方法是使用$('.class1, .class2').on('click', some_function);或者$('.class1').add('.class2').on('click', some_function);。这两种方式都可以将相同的点击事件绑定到多个元素上。

另一种解决方法是先将需要绑定点击事件的元素保存为变量，然后使用.add()方法将它们组合起来。例如：const $class1 = $('.class1'); const $class2 = $('.class2'); $class1.add($class2).on('click', some_function);。

需要注意的是，.add()方法也可以用于jQuery对象。

需要注意的是，.add()方法会将点击事件绑定到已存在的jQuery对象上，即使其中一个选择器返回undefined。

有人问到$('.class1, .class2')和$('.class1').add('.class2')之间的真正区别以及在什么情况下应该使用.add()。回答是.add()只是将另一个选择器添加到现有元素集合中，如果两个选择器来自不同的函数，或者以其他方式逐渐构建集合，可以使用.add()。大多数情况下，我们不需要使用.add()。

需要注意的是，使用$('.class1, .class2')或者$('.class1').add('.class2')时，记得在选择器之间加上空格，否则可能无法正常工作。

有人在讨论中提到，使用$('#class1, #class2')对于id选择器在某些情况下不起作用，而使用.add()方法可以解决这个问题。

还某些情况下，在事件处理程序中，例如some_function，使用id选择器（例如$("#myid")）时，this关键字指向正确的对象，但是使用class选择器（例如$(".myclass")）时，this关键字指向不同的对象，可能是容器对象。有人问这是否是预期的行为，或者可能是观察错误或误解了某些东西。

0