使用模式匹配时jQuery选择器优先级

I am creating a form that implements a bunch of similar elements. They are custom select boxes, created out of <ul>s.

我正在创建一个实现一堆类似元素的表单。它们是自定义选择框,由

Some of these elements are slightly different in the way I want the mousedown event to be handled though.

其中一些元素在我希望处理mousedown事件的方式上略有不同。

The way I have it set up currently is that, by appending _custom_select to the end of an elements class name, it will be treated as one of these special elements as far as CSS is concerned.

我目前设置它的方式是,通过将_custom_select附加到元素类名称的末尾,就CSS而言,它将被视为这些特殊元素之一。

However, when the string selections is found inside a class name (that will coincidentally also end with _custom_select in order to apply the proper styling) I want to use a different mousedown event handler.

但是,当在类名称中找到字符串选择时(为了应用正确的样式,巧合地也会以_custom_select结尾)我想使用不同的mousedown事件处理程序。

This is the relevant section of my event listener set up:

这是我的事件监听器设置的相关部分:

$('[class$="_custom_select"] li').mousedown(function(event){
    var opt= event.target;
    if(opt.className!='li_disabled' && event.which==1)
    {
        if(opt.className=='li_unselected'){
            opt.className= 'li_selected';
        }
        else{
            opt.className= 'li_unselected';
        }
        update_selections(opt.parentElement);       
    }
});

$('[class*="selections"]').mousedown(function(event){
    var opt=event.target;
    if(event.which==1){
        if(opt.className=='li_unselected'){
            opt.className= 'li_selected_2';
        }
        else{
            opt.className= 'li_unselected';
        }
    }
});

This code works, but notice how, in the second binding, I had to bind the event listener to the ul that holds the li that is actually being clicked.(The ul is the element whose class name matches the pattern) In the first one however, I can bind the event listener directly to the li elements contained within the ul.

这段代码有效,但请注意,在第二个绑定中,我必须将事件监听器绑定到保存实际被点击的li的ul。(ul是类名与模式匹配的元素)在第一个但是,我可以将事件监听器直接绑定到ul中包含的li元素。

If I change the second jQuery selector to $('[class*="selections"] li') the event listener is never bound to the corresponding lis.

如果我将第二个jQuery选择器更改为$('[class * =“selections”] li'),则事件侦听器永远不会绑定到相应的lis。

What is causing this behavior?

是什么导致了这种行为?

I am aware that I can just check event.target.tagName to ensure the event is bubbling up from an <li>, but that is not what the question is about.

我知道我可以检查event.target.tagName以确保事件从

冒泡,但这不是问题所在。

I originally thought it had something to do with precedence and that the listeners weren't being bound because the lis that would have matched the second selector already matched against the first selector.

我原本以为它与优先级有关,并且侦听器没有被绑定,因为与第二个选择器匹配的lis已经与第一个选择器匹配。

However, after implementing logging and looking at the DOM I have determined that when I change the second selector to: $('[class*="selections"] li') neither event listener is bound to the lis that match the second selector.

但是,在实现日志记录并查看DOM之后,我确定当我将第二个选择器更改为:$('[class * =“selections”] li')时,事件侦听器都不会绑定到与第二个选择器匹配的lis。

Here is a link to a JS fiddle of the 'working version'. If you add ' li' to the second selector and then try to click the <li>s in the box to the right, you will see that they no longer become green.

这是一个链接到“工作版本”的JS小提琴。如果您将“li”添加到第二个选择器,然后尝试单击右侧框中的

,您将看到它们不再变为绿色。

jsFiddle

https://jsfiddle.net/6sg6z33u/4/

1 个解决方案

#1

Okay, thanks for posting the jsFiddle. This is an easy fix!

好的,感谢发布jsFiddle。这是一个简单的解决方案!

The elements in your second li are being added dynamically. When you bind to elements using the shortcut methods like .click() it only binds to the elements on the page when it initially bound

第二个li中的元素是动态添加的。使用.click()等快捷方法绑定到元素时,它只会在最初绑定时绑定到页面上的元素

The fix: use the .on() method, which is the preferred method per jQuery foundation. This method allows for live binding meaning it will pick up on dynamic elements.

修复:使用.on()方法,这是每个jQuery基础的首选方法。此方法允许实时绑定,这意味着它将获取动态元素。

$('[class*="selections"]').on( 'mousedown', 'li', function(event) {
    var opt = event.target;
    if (event.which == 1) {
        if (opt.className == 'li_unselected') {
            opt.className = 'li_selected_2';
        } else {
            opt.className = 'li_unselected';
        }
    }
});

#1