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

Question

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

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

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

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

这是我设置的事件侦听器的相关部分：

$('[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';
}
}
});

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

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

是什么导致了这种行为？

我知道我可以检查event.target.tagName以确保事件从<li>冒泡，但这不是问题所在。

---

我最初认为这与优先级有关，并且听众没有被绑定，因为与第二个选择器匹配的li已经与第一个选择器匹配。

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

这是指向"工作版本"的JS小提琴的链接。如果将' li'添加到第二个选择器，然后尝试单击右侧框中的<li>，您将看到它们不再变为绿色。

js小提琴

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

Answer 1

好的，感谢您发布 jsFiddle。这是一个简单的解决方案！

第二个li中的元素是动态添加的。当您使用快捷方式方法(如.click())绑定到元素时，它仅在最初绑定时绑定到页面上的元素

解决方法：使用.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';
}
}
});