Question

在我正在开发的网络应用程序中，我需要动态创建/删除 iframe 元素并捕获相应的删除事件。

这是相关的html：

index.html
<main> 
  [..]
  <iframe id="iframe_id" width="700" height="650" src=""></iframe>
  <div class="theday" id="js-theday"></div>
  [..]
</main>
<script src="app.js"></script>
<script type="text/javascript">
  function closeIFrame() {
    $('#iframe_id').remove();
  }
  [..]
</script>

在 app.js 中，我捕获了 closeIFrame() 中发送的删除事件

$('#iframe_id').on('DOMNodeRemoved', function() {

}

在第一次运行时，当 iframe 调用 parent.closeIFrame() 时，app.js 正确接收到 DOMNodeRemoved 和做事。

在某些时候，我需要重新创建 iframe 元素。在 app.js 中

function recreate_iframe_html() {
  const target = document.querySelector('#js-theday');
  var new_iframe = document.createElement('iframe');
  new_iframe.setAttribute('id', 'iframe_id');
  new_iframe.width = 700;
  new_iframe.height = 650;
  new_iframe.src = '';
  target.parentNode.insertBefore(new_iframe, target);
}
[..]
recreate_iframe_html();

当新 iframe 调用 parent.closeIFrame() 时，iframe 被正确移除，但 app.js 未检测到 DOMNodeRemoved 事件。

这是为什么？

感谢您的帮助。

Answer 1

.on('DOMNodeRemoved') 仅适用于查询返回的项目（即 #iframe_id）。它不会一直听新创建的具有相同 id 的项目。

您需要在创建新 iframe 时添加另一个侦听器。

为什么 DOMNodeRemoved 事件只工作一次？

1 个答案: