Question

我查看了.on() | jQuery API Documentation以获取有关我的特定用例的帮助，但我找不到有关如何操作的信息，或者是否可以完成。

我想为两个不同的“选择器”附加一个事件（比如点击），如下所示：

one：'div[id^="action_"]'
第二名：'div[id^="user_"]'

我已经尝试了以下所有组合，这些组合基于jQuery通常如何处理多个事物，但有些只是不起作用而其他人只会处理第一个选择器而忽略第二个选择器：

// correct
$(document).on("click", 'div[id^="action_"], div[id^="user_"]' , function(){

// incorrect
$(document).on("click", 'div[id^="action_"] div[id^="user_"]' , function(){
$(document).on("click", 'div[id^="action_"]' || 'div[id^="user_"]' , function(){
$(document).on("click", 'div[id^="action_"]', 'div[id^="user_"]' , function(){

第一个是我确信会起作用的，当它没有时，让我尝试其他一切，在黑暗的尝试中显然是一个镜头。在现在标记不正确的那些中，第一个根本不做任何事情，第二个和第三个都导致第一个被处理而不是第二个。最后一个我很确定不起作用，我没想到它，因为它保留了语法的[,data]部分，但为了完整性，尝试了它。

我只是忽略了语法这么简单的东西吗？
或者，这根本不能按原样完成吗？
现在明确它可行，但其他可能会干扰！

在我继续将它们分成两段代码之前，我们将非常感激任何对此的帮助，这些代码将是丑陋和混乱的。 TIA。

分辨率

感谢弗兰克的答案和善意的小提琴，我们确认了我在测试方法第一行所示的初始本能是正确的（我更新了它以更清楚地显示什么是正确的而不是 ）。我仍然不确定为什么它没有按预期工作导致我发布问题，但我怀疑问题可能源于GM和/或页面本身可能的干扰，而不是代码。如果我找到观察的确切来源，我会编辑它以反映它的完整性。

Answer 1

您提到的第一种方式 - 即$(document).on("click", 'div[id^="action_"], div[id^="user_"]', ...) ---绝对正确，并且基于this fiddle

工作

另外，您可以为函数命名，只需将函数名称传递给on()，这样就可以重用命名函数：

function myCallBack(event) {
   alert($(event.target).html());
}

$(document).ready(function() {
   $(document).on("click", 'div[id^="action_"], div[id^="user_"]', myCallBack);
})

请参阅此方法工作here。

另外，请注意event performance with on()，特别是当（1）将委托事件附加到document时，以及（2）使用更复杂的选择器时。关于＃1的一件事是这个

将处理程序附加到文档中更合适的位置

使用jQuery .on（）

分辨率

1 个答案: