jquery 在 div 上聚合 onclick

Question

我有一个 div，我在页面加载时绑定了一个点击 function，如下所示

 <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 在点击时都会运行多次

Answer 1

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

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

基本上将点击事件绑定到一个公共父元素（ 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");
});

这会将点击处理程序附加到文档本身，但是在处理该点击时，它将通过选择器参数过滤原始元素。 因此，任何原始.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");
});

它将响应任一原始元素（因为两者都在选择器中）并切换两个类，无论哪个当前处于活动状态。