jquery聚合onclick on div

提问者：小点点

jquery聚合onclick on div

我有一个div，我在pageload上绑定了一个单击函数，如下所示

 <div class="document-short-list-item" data-d-id="5" data-w-id="16" data-s-id="15">Klik her for at tilføje</div>

$(".document-short-list-item").click(function () {
    addToShortList(this);
});

addToShortList执行以下操作:

  $(element).removeClass('document-short-list-item').addClass('document-short-list-item-added').on('click', removefromShortList(element));

而removefromShortList则会反转相同的结果

 $(element).removeClass('document-short-list-item-added').addClass('document-short-list-item').on('click', addToShortList(element));

问题是上面的代码会在每次单击时聚合，这意味着addToShortList和removeFromShortList都会在单击时运行多次

共1个答案

匿名用户

因为每个click事件都会调用另一个.on()来添加更多的处理程序。

在它们自己的绑定事件中绑定/取消绑定处理程序几乎总是一个坏主意，并且经常导致这种情况。相反，您可以依靠.on()的功能在类更改时动态执行。这被称为“事件委托”。

基本上，将click事件绑定到一个公共父元素(document通常可以工作，除非有任何东西正在停止事件传播）。像这样的东西:

$(document).on("click", ".document-short-list-item", function () {
    $(this)
        .removeClass("document-short-list-item")
        .addClass("document-short-list-item-added");
});
$(document).on("click", ".document-short-list-item-added", function () {
    $(this)
        .removeClass("document-short-list-item-added")
        .addClass("document-short-list-item");
});

这将把click处理程序附加到文档本身，但在处理该click时，它将通过选择器参数筛选原始元素。因此，任何始发的.document-short-list-item将调用第一个处理程序，而任何始发的.document-short-list-item-added将调用第二个处理程序。这样，您只需要在页面加载时设置这些处理程序一次，它们就会根据需要进行内部筛选。

或者，如果这种方法在您的情况下可行，您可以使用一个处理程序，该处理程序将简单地切换类。例如:

$(document).on("click", ".document-short-list-item, .document-short-list-item-added", function () {
    $(this)
        .toggleClass("document-short-list-item")
        .toggleClass("document-short-list-item-added");
});

它将响应任何一个发起元素（因为两个元素都在选择器中）并切换两个类，而不管哪个元素当前处于活动状态。