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

在我正在开发的web应用程序中，我需要动态创建/删除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>

在第一次运行中，当iframe调用父.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调用父.closeIFrame（）时，iframe被正确删除，但是

app.js

没有检测到

DOMNodeRemoved

事件

为什么呢

感谢您的帮助。

.on（'DOMNodeRemoved'）

仅对查询返回的项目有效（即，

\iframe\u id

）。它不会一直监听新创建的具有相同id的项

创建新iframe时，需要添加另一个侦听器

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();