javascript - 检测追加后div的长度

Question

我在检测附加 div 的长度和索引时遇到了麻烦，我研究了很多东西，并且有一个使用 MutationObservers 的解决方案，但不知何故，我不断地问自己是否需要它对于此类问题，

但是，让我们开始讨论这个问题。我有一个像这样动态填充的 div，

<div class="array-placeholder">
   <div id="tagContainer" class="row tag">

     <!-- dynamic elements -->.....

   </div>
</div>

当我单击此按钮时，它会附加另一个动态元素，请参阅下面的代码:

 $('body').off('click.addCollection').on('click.addCollection', function () {

 //list and new widgets are just containers and datalist inside the array-placeholder div  
 let newElem = $(list.attr('data-widget-tags')).html(newWidget);
    newElem.appendTo(list);

 })

我尝试过此解决方案来获取 array-placeholder div 的长度，但它似乎不起作用，该函数从未启动:

$('body').on('DOMSubtreeModified', '.array-placeholder', function (event) {
    console.log( $(".array-placeholder > div").length);
})

结果

//nothing and when you click to the appended element via moveUpButton.closest(".tag")  you 0 as index  

我是否必须实现MutationObserver来解决这个问题如果是的话，你能指导我完成这个，谢谢

Answer 1

DOMSubtreeModified

This event has been deprecated in favor of the Mutation Observer API

是的，你必须使用 Mutation Observer API 。要实现这一点，您可以引用 This