Javascript 使用Jquery检查用户是否已将项添加到列表中

我有一个列表，用户可以使用项目下拉列表向其中添加项目。我正在跟踪用户行为，并希望在每次用户向该列表添加内容（而不是删除内容）时执行一个函数。列表如下所示：

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

他们可以通过下拉菜单向列表中添加更多的项目，问题是这些项目的链接没有Jquery选择器，因此我尝试检测项目何时添加到列表中

到目前为止，我的努力是：

---

var listOfItems=$（“#用户项”）.children（）

-我可以计算列表中当前有多少项。但是，我无法确定如何检查用户是否添加了更多项目。我是Jquery的新手，如果有人能给我指出正确的方向，我将不胜感激？谢谢

在添加新项之前，可以使用Jquery.each（）检查下拉列表的所有值

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

---

参考：

使用DOMSubtreeModified事件并检查是否向DOM中添加了新元素

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

演示：

---

您可以观察DOM特定部分的突变，并在突变发生时做任何您想做的事情

此处的文档：

例如：

const itemsList=document.querySelector（“#用户项”）；
const observer=新的MutationObserver（（mutationList，observer）=>{
mutationList.forEach（（突变）=>{
if（mutation.type==“childList”）{
//你想干什么就干什么，我只是记下来
//已添加
的子级。
log（“已添加子节点”）；
}
});
});
observer.observe（itemsList，{childList:true，subtree:true}）；
/**
*只需一些基本代码即可将项目添加到列表中。不是jQuery，而是
*我想你已经有了这段代码，所以这就是我要做的
*演示工作
*/
const itemAdder=document.querySelector（“添加项”）；
设itemNumber=0；
itemAdder.addEventListener（“单击”，（e）=>{
itemNumber++；
const listItem=document.createElement（“LI”）；
setAttribute（“id”，`user item-${itemNumber}`）；
const listItemText=document.createTextNode（`List item${itemNumber}`）；
appendChild（listItemText）；
itemsList.appendChild（listItem）；
});


添加项
您可以通过使用
MutationObserver
来实现。
MutationObserver界面
提供监视对
DOM树所做更改的功能。它的设计是为了替代作为
DOM3
Events规范一部分的旧的突变事件特性。
下面是一个工作示例


var targetNode=$（“#用户项”）；
函数createObserver（回调）{
返回新的MutationObserver（函数（mutationRecords）{
mutationRecords.forEach（回调）；
});
}
$（“#用户项”）。每个（函数（）{
var obs=createObserver（函数（突变）{
$（mutation.addedNodes）.css（“背景色”、“绿色”）；
});
obs.observe（这个，{childList:true}）；
});
setTimeout（函数（）{
$（“#用户项目”）.append（“
新项目”
”）；
}，1000）


旧的
旧的两个
用户如何将项目添加到列表中？将需要运行的代码放在该逻辑中。这如何帮助OP知道何时添加了某些内容？在使用JavaScript添加新元素之前，可以检查新元素是否已经存在于现有元素的输出中。这是被贬低的。@manikantgautam感谢您的反馈，我已经发布了这个答案，以便提问者能够获得一些想法并做出相应的更改。谢谢@manikantgautam-这在我的代码中确实很有效，但我担心它是否被贬低-实现这一点的更新方式是什么？：）
$("#a").bind("DOMSubtreeModified", function() {
    alert("list updated");
});