Question

我正在通过JQuery动态添加一个新元素，其代码如下：

$('#example').after("<p class='xx'></p>")

在调用此代码并添加“ xx”元素后，我想运行其他代码。该事件发生时如何“收听”并接听？

谢谢

Answer 1

您可以为此使用Mutation Observer。

下面的演示是对参考示例的简单快速改编。

$(document).ready(function(){

  var targetNode = document.getElementById('some-id');
  var config = { attributes: true, childList: true, subtree: true };
  var callback = function(mutationsList, observer) {
    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, config);

  $('#example').after("<p class='xx'>I am a paragraph inserted by a script.</p>");
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="some-id">
  <p id="example">I'm a static paragraph.</p>
</div>

如何聆听“事后”事件？

1 个答案: