jquery - 如果添加或删除子 div，请刷新 div？

Question

我做了一个函数，它每 3 秒更新一个特定的 div。但我想做的是我想检测 div 中的变化。当 div 类“.dock-container”获得新的子 div 或删除子 div 时，我想重新加载 div，而不管子 div 被称为什么。如果没有任何变化，没有添加新的子 div，则不会发生任何事情。

这就是我现在得到的，它每 3 秒自动更新一次 div：

jQuery(document).ready(function($) {
  function autoRefresh() {
    $.ajax({
      success: function(data) {
        var result = $('<div />').append(data).find('.dock-container').html();
        $('.dock-container').html(result);
      }
    });
  }
  autoRefresh();
  // Refresh at page load and every 3000 milliseconds / 3 seconds
  var auto_refresh = setInterval(autoRefresh, 3000);
})

编辑：我尝试使用 Mozilla 的示例：

jQuery(document).ready(function($) {
  // Select the node that will be observed for mutations
  var targetNode = document.getElementsByClassName('dock-container');

  // Options for the observer (which mutations to observe)
  var config = { attributes: true, childList: true };

  // Callback function to execute when mutations are observed
  var callback = function(mutationsList) {
      for(var mutation of mutationsList) {
          if (mutation.type == 'childList') {
              console.log('A child node has been added or removed.');
          }
      }

  };
  var observer = new MutationObserver(callback);
  observer.observe(targetNode[0], config);
})

这是 div 的孩子，我想检测它们是否被删除或添加：

<div class="dock-container">
      <div id="widget-clock-widget-15" class="dock-element widget_widget-clock-widget" style="width:50%"><div class="clock"><div class="clock-time"><span class="clock-hours">test 1</span></div></div></div>
      <div id="widget-clock-widget-26" class="dock-element widget_widget-clock-widget" style="width:50%"><div class="clock"><div class="clock-time"><span class="clock-hours">test 2</span></div></div></div>
</div>

标签： jquery