使用 Jquery 檢查用戶是否已將項目添加到列表中

Question

我有一個列表，用戶可以使用項目下拉列表向其中添加項目。 我正在跟蹤用戶行為並希望每次用戶向此列表添加某些內容（而不是刪除它）時執行一個函數。 該列表如下所示：

<ul class="items-list" id="user-items">
  <li id="newitem1"></li> 
  <li id="newitem2"></li>
</ul>

他們可以使用下拉列表將更多項目添加到列表中，問題是這些項目的鏈接沒有 Jquery 選擇器，因此我試圖檢測何時將項目添加到列表中。

到目前為止，我的嘗試是：

var listOfItems = $("#user-items").children() - 我可以計算列表中當前有多少項目。 但是我不知道如何檢查用戶是否添加了更多項目。 我是 Jquery 的新手，如果有人能在這里指出我正確的方向，我會很感激嗎？ 謝謝

Answer 1

使用 DOMSubtreeModified 事件並檢查是否有新元素添加到 DOM。

$("#a").bind("DOMSubtreeModified", function() {
    alert("list updated");
});

演示：小提琴

Answer 2

在添加新項目之前，可以使用 Jquery .each() 檢查下拉列表的所有值。

<ul class="items-list" id="user-items">
  <li id="newitem1"></li> 
  <li id="newitem2"></li>
</ul>

查詢：

$( "li" ).each(function( index ) {
  console.log( index + ": " + $( this ).text() );
});

參考： https : //api.jquery.com/each/

Answer 3

您可以觀察 DOM 特定部分中的突變，並在它們發生時執行您想要的任何操作。

此處的文檔： https : //developer.mozilla.org/en-US/docs/Web/API/MutationObserver

例子：

 const itemsList = document.querySelector("#user-items"); const observer = new MutationObserver((mutationList, observer) => { mutationList.forEach((mutation) => { if (mutation.type === "childList") { // Do whatever you want here, I'm just logging that // a child of the <ul> has been added. console.log("A child node has been added"); } }); }); observer.observe(itemsList, { childList: true, subtree: true }); /** * Just some basic code to add items to the list. Not jQuery, but * you already have this code I assume, so this is just here to make * the demo work */ const itemAdder = document.querySelector("#add-item"); let itemNumber = 0; itemAdder.addEventListener("click", (e) => { itemNumber++; const listItem = document.createElement("LI"); listItem.setAttribute("id", `user-item-${itemNumber}`); const listItemText = document.createTextNode(`List item ${itemNumber}`); listItem.appendChild(listItemText); itemsList.appendChild(listItem); });

 <ul id="user-items"> </ul> <button id="add-item">Add Item</button>

Answer 4

您可以通過使用MutationObserver來實現這一點。 MutationObserver interface提供了監視對DOM tree所做更改的能力。 它旨在替代舊的 Mutation Events 功能，后者是DOM3事件規范的一部分。 這是一個工作示例。

 var targetNode = $("#user-items"); function createObserver(callback) { return new MutationObserver(function (mutationRecords) { mutationRecords.forEach(callback); }); } $("#user-items").each(function () { var obs = createObserver(function (mutation) { $(mutation.addedNodes).css("background-color", "green"); }); obs.observe(this, { childList: true }); }); setTimeout(function(){ $("#user-items").append('<li id="newitem3">New One</li>'); },1000)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <ul class="items-list" id="user-items"> <li id="newitem1">Old One</li> <li id="newitem2">Old two</li> </ul>