带有jQuery .on()的多个选择器 [英] Multiple Selectors with jQuery .on()

问题描述

我查看了 .on()|jQuery API文档可为我的特定用例提供帮助，但我找不到有关如何执行或什至可以执行的信息.

我想将一个函数附加到两个不同选择器"的事件(例如点击)上，如下所示:

• 一个:'div [id ^ ="action _"]]
• second:'div [id ^ ="user _"]'

我已经根据jQuery通常如何处理多种情况尝试了以下所有组合，但有些组合无效，而其他组合仅处理第一个选择器而完全忽略了第二个选择器:

 //正确$(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(){$(document).on("click"，'div [id ^ ="action_"]'，'div [id ^ ="user_"]'，function(){ 

第一个是我确定可以使用的功能，当不能使用时，让我尝试了其他所有操作，就像在黑暗中尝试一样.现在标记为不正确的那些中，第一个根本不执行任何操作，第二个和第三个都导致第一个被处理，而第二个则不被处理.我很确定的最后一个是行不通的，我没想到它会起作用，因为它保留了语法的 [，data] 部分，但是为了完整起见，尝试了一下.

• 我只是在这里忽略语法这样简单的内容吗?
• 或者，这不能完全按原样完成吗?
• 现在清楚它可以工作，但是可能有其他干扰！

对此的任何帮助将不胜感激，在我继续将它们分成两段丑陋且混乱的代码之前，将不胜感激.TIA.

分辨率

由于弗兰克(Frank)的回答和友好的小提琴，已经证实，我在尝试的方法之一上显示的最初直觉是正确的(我已对其进行更新，以更清楚地显示什么是正确的，而不是正确的).我仍然不确定为什么它无法按预期运行，这导致我提出了问题，但我怀疑问题可能是由于GM和/或页面本身上的某些内容(而不是代码)引起的.如果我找到了观察的确切来源，为了完整性起见，我将对其进行编辑以反映它.

解决方案

您提到的第一种方法--- $(document).on("click"，'div [id ^ ="action_]，div [id ^ =" user_]'，...) ---绝对正确，并且基于这个小提琴

作为替代方案，您可以命名函数，只需将函数名称传递给 on()，这样就可以重复使用命名的函数:

  function myCallBack(event){alert($(event.target).html());}$(document).ready(function(){$(document).on("click"，'div [id ^ ="action_"]，div [id ^ ="user_"]'，myCallBack);}) 

请参见此处.

此外，请注意使用 on()的事件性能，尤其是(1)将委托事件附加到 document ，以及(2)使用更复杂的选择器时.关于#1需要注意的一件事是

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

I have looked at the .on() | jQuery API Documentation for help with my particular use-case but I couldn't find the information on how to do it or if it can even be done.

I would like to attach a function to an event (say click) for two different "selectors", like this:

• one: 'div[id^="action_"]'
• second: 'div[id^="user_"]'

I have tried all the below combinations based on how jQuery normally handles multiples of things but some just don't work and the others will only process the first selector and ignore the second altogether:

// 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(){

The first was what I was sure would work and when it didn't, led me to try everything else as clearly a shot in the dark attempt. Of the ones now marked incorrect, first one simply doesn't do anything, second and third one both result in the first being handled but not the second. The last one I was pretty sure doesn't work and I didn't expect it to, since it holds the [,data] portion of the syntax but for sake of completeness, tried it.

• Am I simply overlooking something as simple as syntax here?
• Or, can this simply not be done as-is?
• Now clear that it works but something else might be interfering!

any help on this would be greatly appreciated before I just go ahead and split them into two pieces of code which would be ugly and messy. TIA.

Resolution

Thanks to Frank's answer and kind fiddles, it was confirmed that my initial instinct as shown on line one of the tried methods was correct (I have updated it to show more clearly what is correct and not). I am still not certain why it didn't work as expected which led me to post the question but I suspect that the problem probably arose from GM and/or possible interference from something on the page itself, and not the code. If I find out the exact source of the observation, I will edit this to reflect it for sake of completeness.

解决方案

The first way you mentioned---that is, $(document).on("click", 'div[id^="action_"], div[id^="user_"]', ...)---is definitely correct, and working based on this fiddle

Also as alternative, you could name your function and simply pass the function name to on(), so you can re-use the named function:

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

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

See this approach work here.

Also, be aware of event performance with on(), particularly when (1) attaching delegated events to document, and (2) when using more complex selectors. One thing to note about #1 is this

attaching the handler to a more appropriate point in the document

这篇关于带有jQuery .on()的多个选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！