Приоритет выбора jQuery при использовании соответствия шаблону

79
8

Я создаю форму, которая реализует кучу похожих элементов. Они представляют собой пользовательские поля выбора, созданные из <ul> s.

Некоторые из этих элементов немного отличаются в том, как я хочу, чтобы событие 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';
}
}
});

Этот код работает, но обратите внимание на то, как во второй привязке мне пришлось привязать прослушиватель событий к ul который содержит li самом деле щелчок. (ul - это элемент, имя класса которого соответствует шаблону). В первом однако я могу связать прослушиватель событий непосредственно с элементами li содержащимися в ul.

Если я переключу второй селектор jQuery на $('[class*="selections"] li') то прослушиватель событий никогда не связан с соответствующими li s.

Что вызывает такое поведение?

Я знаю, что я могу просто проверить event.target.tagName чтобы гарантировать, что событие пузырится от <li>, но это не тот вопрос.

Первоначально я думал, что это связано с приоритетом и что слушатели не связаны, потому что li который бы соответствовал второму селектору, уже сопоставлен с первым селектором.

Однако после выполнения регистрации и просмотра DOM я определил, что когда я меняю второй селектор на: $('[class*="selections"] li') ни один из прослушивателей событий не привязан к li который соответствует второму селектору.

Вот ссылка на скрипт JS "рабочей версии". Если вы добавите ' li' ко второму селектору, а затем попробуйте нажать <li> в поле справа, вы увидите, что они больше не станут зелеными.

jsFiddle

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

спросил(а) 2021-01-19T13:33:03+03:00 9 месяцев, 1 неделя назад
1
Решение
65

Хорошо, спасибо за сообщение 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';
}
}
});

ответил(а) 2021-01-19T13:33:03+03:00 9 месяцев, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема