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

Posted 2023-05-09

【中文标题】当 div 被填充/可见时触发事件

【英文标题】：Trigger an event when a div is populated/visible

【发布时间】：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

【参考方案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);