带有 jQuery .on() 的多重选择器

Question

我已经查看了 .on() | jQuery API Documentation 以寻求有关我的特定用例的帮助，但我找不到有关如何做或是否可以完成的信息。

我想为两个不同的 "selectors" 将一个函数附加到事件（比如点击），如下所示：

一个：'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.

分辨率

多亏了 Frank 的回答和善意的摆弄，证实了我在第一种尝试方法中显示的最初直觉是正确的（我已经对其进行了更新以更清楚地表明什么是正确的，什么是错误的)。我仍然不确定为什么它没有按预期工作，这导致我 post 这个问题，但我怀疑这个问题可能来自 GM and/or 可能来自页面本身的某些东西的干扰，而不是代码。如果我找到观察的确切来源，为了完整起见，我将对其进行编辑以反映它。

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 需要注意的一件事是

attaching the handler to a more appropriate point in the document

带有 jQuery .on() 的多重选择器

Multiple Selectors with jQuery .on()

jquery

greasemonkey

分辨率