jQuery die() 杀死所有元素而不是只指定一个

Question

我有一个奇怪的问题，我怀疑这可能只是正常行为，但我需要人们确认。我正在使用以下代码将实时点击事件连接到许多 <li> 元素：

$('li', $list).live("click", rightItemSingleClickEvent);

请注意，我在这里使用了一个整体选择器来将相同的实时点击事件连接到 $list 中的所有 <li> 元素，这只是一个无序列表。我在$(document).ready() 上调用了此代码一次。 rightItemSingleClickEvent() 实际上杀死了方法顶部的实时点击事件。这是因为有与点击相关的动画，我在动画发生时将其杀死，这样就不会发生重复点击。杀死点击的代码如下：

$(this).die("click");

动画完成后，我重新连接点击事件：

$notesArea.fadeIn(function() {
    $listItem.live("click", rightItemSingleClickEvent);
});

我应该指出，所有这些代码似乎都运行良好。我可以选择一个列表项单击，并且每次都成功杀死并重新连接（从而防止动画期间重复单击）。但是，我的问题是，当我认为我只杀死了一个列表项 (<li>) 时，它似乎杀死了所有列表项，而不仅仅是那个。因此，一旦我单击一个列表项，虽然它的功能继续工作（我仍然可以单击），但所有其他列表项都无法再单击。我想知道这是否与我通过一个涵盖所有 <li> 的一揽子声明连接实时点击事件这一事实有关。

因此，如果我将实时事件单独连接到每个 <li>，而不是仅使用单个选择器完成所有操作，它可能会起作用吗？我只是不确定为什么在单个 <li> 上调用 die() 也会杀死它的所有兄弟姐妹。

任何见解将不胜感激。谢谢。

澄清：我被要求为 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，并且相同的行为仍然存在。老实说，我只是不确定发生了什么。但即使没有一揽子实时连接语句，杀死一个列表项上的点击事件也会杀死所有列表项。在我的所有代码中只有一个地方会杀死实时点击事件，就是我在上面发布的那个。所以我完全不知所措。

更新 2： 因为我无法解决这个问题，所以我修改了代码以检查“:animated”状态，并放弃了杀死并重新连接实时点击事件的想法。但是，我仍然想知道为什么一个列表项上的 kill() 会杀死所有列表项，即使我已分别为每个列表项分配实时点击事件。

Answer 1

您的第一个问题是如何分配live events。

Live events 目前仅在用于选择器时有效。

意味着这将无法正常工作：

$('li', $list).live("click", rightItemSingleClickEvent);

但这会

$('#'+$list.attr('id')+' li').live("click", rightItemSingleClickEvent);

你的 die 调用杀死所有元素上的事件的原因是因为它绑定在父元素上一次。当您删除它时，您将其全部删除。使用事件委托 (.live()) 的主要原因是您只绑定一个事件而不是多个事件。