当 div 被填充/可见时触发事件答案

【问题标题】：Trigger an event when a div is populated/visible当 div 被填充/可见时触发事件
【发布时间】：2017-01-03 15:52:09
【问题描述】：

一旦从后面填充了一个 DIV，我想触发一个事件，我的 DIV 中插入了 2 个节点。我正在使用这个：

$(function () {
    var xml = document.querySelector('#XML');

    xml.addEventListener("DOMNodeInserted", function (ev) {  
        doSomething();
    }, false);
});

这在加载或重新加载文档后填充 XML div 时有效。在某些时候，用户单击一个按钮并且 div#XML 被动态填充而无需重新加载，即使将 DOM 节点插入到我的元素中，也没有任何反应。

当我的 div 发生变化时，如何触发“doSomething()”？

【问题讨论】：

你的问题是什么？
developer.mozilla.org/en-US/docs/Web/API/MutationObserver

标签： javascript jquery events dom addeventlistener

【解决方案1】：

您的代码运行良好。就像你在Mutation events 和相对兼容性HERE 中看到的那样：

$(function () {
  $('#XML').on("DOMNodeInserted", function (ev) {
    console.log('DO SOMETHING');
  });

  $('#btnAdd').on('click', function(e) {
    $('#XML').append($('<p>', {text: 'this is a new paragragh'}));
  });
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<div id="XML"></div>

<button id="btnAdd">Add a paragragh to div</button>

【讨论】：

【解决方案2】：

以下代码可能是您要查找的代码。它会在每个1000 milliseconds 中查找您的div 中的更改，您可以根据自己的要求进行更改。如果您的 div 最初有一些 text，则相应地更新 oldVal。

$('#XML').change(function(){
   alert("div has changed!");
   // replace with your actions
});

var oldVal = "";
function InputChangeListener()
{
   if($('#XML').val() != oldVal)
   {
     oldVal  = $('#XML').val();
     $('#XML').change();    
   }
}
setInterval(InputChangeListener, 1000);

【讨论】：