使用 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>