jQuery die() убивает все элементы вместо одного указанного
У меня есть специфическая проблема, которую я подозреваю, может быть просто нормальное поведение, но мне нужны люди, чтобы подтвердить. Я подключаю события живого клика к ряду <li>
элементы с помощью этого кода:
$('li', $list).live("click", rightItemSingleClickEvent);
Обратите внимание, что здесь используется бланк-селектор, чтобы подключить одно и то же событие живого клика ко всем <li>
элементы в $ list, который является просто неупорядоченным списком. Я называю этот код один раз $(document).ready()
, rightItemSingleClickEvent() фактически убивает событие live click в верхней части метода. Это связано с тем, что с кликом связана анимация, и я убиваю ее, пока анимация не происходит, чтобы повторные клики не возникали. Код для уничтожения клика ниже:
$(this).die("click");
После завершения анимации я снова подключаю событие click:
$notesArea.fadeIn(function() {
$listItem.live("click", rightItemSingleClickEvent);
});
Я должен отметить, что весь этот код работает нормально. Я могу выбрать элемент списка, чтобы щелкнуть по нему, и каждый раз он успешно убивает и снова подключается (тем самым предотвращая дублирование кликов во время анимации). Однако моя проблема в том, что когда я думаю, что убиваю только этот единственный элемент списка (<li>
), кажется, убивает все элементы списка, а не только этот. Поэтому, как только я щелкаю один элемент списка, пока его функциональность продолжает работать (я все еще могу щелкнуть), все остальные больше не могут быть нажаты. Мне интересно, связано ли это с тем фактом, что я подключаю событие live click через общее утверждение, которое охватывает все <li>
это сразу.
Так что, возможно, если бы я должен был подключить живое событие к каждому <li>
индивидуально, вместо того, чтобы делать их все с помощью одного селектора, это может сработать? Я просто не уверен, зачем вызывать die() на одном <li>
убивает всех своих братьев и сестер.
Любое понимание будет оценено. Благодарю.
ПОЯСНЕНИЕ: меня попросили опубликовать немного больше кода для rightItemSingleClickEvent. Эта функция по сути обрабатывает то, что происходит, когда пользователь щелкает элемент списка. Я имитирую щелчок и снятие клика, добавляя и удаляя классы CSS. И есть еще одно текстовое поле, которое отображается при нажатии и скрывается при снятии. Это анимация, которая должна быть завершена перед повторным подключением событий живого клика. Я также должен отметить, что я использую вспомогательные функции для уничтожения и подключения событий щелчка, а handleNotes() - это функция, которая сохраняет текст в текстовом поле, когда пользователь снимает клик, и выполняет несколько других вещей, которые я не считаю связанные с этим вопросом. Как ни странно, мой код, тем не менее, размещен ниже:
function rightItemSingleClickEvent(ev) {
var $target = $(ev.target); // what was clicked on the item
var $clickedItem = $('#' + $(this).attr('id'));
killItemClickEvents($(this)); // kill live click event to prevent extra clicks during animation
if ($target.is('a.ui-icon-circle-close')) { // if clicking remove icon, just remove the item
removeItem($clickedItem, getLeftList());
}
else { // otherwise, handle click event
if ($clickedItem.hasClass("ui-state-default")) { // UNCLICK BUTTON LOGIC (if button is clicked)
handleNotes("hide", $clickedItem); // Hide notes box and store its contents in $(this)'s notes div
$clickedItem.removeClass("ui-state-default").addClass("ui-state-active"); // unclick button
}
else { // CLICK BUTTON LOGIC (if button is unclicked)
if ($clickedItem.siblings(".ui-state-default").attr('id') != undefined) { // if a button is already clicked
// got some stuff to do with button that was already clicked
var $prev_clickedButton = $clickedItem.siblings(".ui-state-default");
handleNotes("store", $prev_clickedButton);
// now unclick all buttons -- only one clickable at a time
$prev_clickedButton.removeClass("ui-state-default").addClass("ui-state-active");
handleNotes("toggle", $clickedItem);
}
else {
handleNotes("show", $clickedItem); // Show notes box and populate it with $(this)'s notes
}
// then click the button that was clicked (by changing its css class)
$clickedItem.removeClass("ui-state-active").removeClass("ui-state-hover").addClass("ui-state-default"); // click it
}
}
}
ОБНОВЛЕНИЕ: Ну, я изменил свой код, чтобы связать событие щелчка с каждым элементом списка индивидуально, так как оно записано в HTML, и то же поведение остается. Я, честно говоря, просто не уверен, что происходит. Но даже без общего оператора live connect уничтожение события click для одного элемента списка убивает его для всех из них. И во всем моем коде есть только одно место, которое убивает событие живого клика, и это то, которое я разместил выше. Так что я в полной растерянности.
ОБНОВЛЕНИЕ 2: Поскольку я не смог обойти эту проблему, я изменил свой код, вместо этого проверив наличие состояний ": анимированные", и отказался от идеи уничтожения и повторного подключения событий живого клика. Однако мне все равно было бы интересно узнать, почему kill() для одного элемента списка убивает их всех, даже если я назначил события живого щелчка для каждого элемента списка по отдельности.
1 ответ
Ваша первая проблема - как вы назначаете живые события.
Живые события в настоящее время работают только при использовании против селектора.
Это означает, что это не будет работать правильно:
$('li', $list).live("click", rightItemSingleClickEvent);
но это будет
$('#'+$list.attr('id')+' li').live("click", rightItemSingleClickEvent);
Причина, по которой ваш вызов die убивает событие на всех элементах, заключается в том, что он привязан к родительскому элементу один раз. Когда вы удаляете его, вы удаляете его для всех. Основная причина, по которой вы используете делегирование событий (.live()), заключается в том, что вы связываете только одно событие, а не несколько.