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

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

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

Jquery：

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

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

Answer 2

使用DOMSubtreeModified事件，并检查是否将新元素添加到DOM。

演示：[JS小提琴] [1]

  [1]: http://jsfiddle.net/eQErD/646/