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()), заключается в том, что вы связываете только одно событие, а не несколько.

Другие вопросы по тегам