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类来模拟单击并取消单击。还有另一个文本框在点击时显示并隐藏在unlick上。这是在重新连接实时点击事件之前必须完成的动画。我还应该指出，我正在使用辅助函数来终止和连接点击事件，而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，同样的行为仍然存在。老实说，我不确定发生了什么。但即使没有全面的实时连接语句，杀死一个列表项上的click事件会将其全部杀死。并且我的所有代码中只有一个地方可以杀死实时点击事件，这是我在上面发布的那个。所以我完全失去了。

更新2：由于我无法解决此问题，因此我修改了代码以检查“：动画”状态，并放弃了杀死和重新连接实时点击事件的想法。但是，我仍然有兴趣知道为什么kill（）在一个列表项上全部杀死它们，即使我已经为每个列表项单独分配了实时点击事件。

Answer 1

您的首要问题是如何分配live events。

Live events目前仅在针对选择器使用时才有效。

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

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

但这会

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

你的模具调用在所有元素上杀死事件的原因是因为它绑定在父元素上一次。当你删除它时，你删除所有这些。使用事件委托（.live（））的主要原因是因为您只绑定一个事件而不是多个事件。

jQuery die（）杀死所有元素而不仅仅是一个指定的元素

1 个答案: