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");
});

它將響應任一原始元素（因為兩者都在選擇器中）並切換兩個類，無論哪個當前處於活動狀態。