在 DOM 更改时触发一次事件

【问题标题】：Fire event once on DOM change在 DOM 更改时触发一次事件
【发布时间】：2016-11-30 17:59:45
【问题描述】：

我正在使用以下 jQuery：

$('table').bind("DOMSubtreeModified",function(){
   myfunction();
});

表格的内容被另一个函数修改了。但是，这会为表中更改的每个元素触发上述操作。

有没有办法在所有表更改完成后只触发一次？

【问题讨论】：

根本不要使用 DOM 突变事件，它们已被弃用，并被积极地从浏览器中删除。使用mutation observers 并观察table 进行子树修改。
给正在修改的函数“myfunction”函数作为回调。

标签： javascript jquery events bind

【解决方案1】：

使用.one() 注册一次活动。在此代码段中，单击按钮将<td> 添加到表中，从而仅触发一次 DOMSubtreeModified 事件。请注意，对表的任何进一步修改都不会触发任何事情。

片段

$('button').click(function() {
  $('table tr').append('<td>TEST</td>');
});


$('table').one("DOMSubtreeModified", function() {
  alert('MODIFIED');
});

table,
td {
  border: 1px solid black;
}
table {
  width: 300px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td></td>
  </tr>
</table>
<button>addTD</button>

【讨论】：