javascript - 重新渲染的 HTML 不受 jQuery 功能的影响

Question

几分钟前，我遇到了一种情况，每当触发某些事件时，我都需要执行一些功能，例如：

<button>Default button</button>然后是一个脚本，如：

$('button').click(() => $('body').append(`<button>Re-rendered button</button>`));

所以我正在寻找一个$(document).change()功能，我发现这个解决方案非常适合我的情况：

$(document).bind('DOMContentLoaded DOMSubtreeModified', () => {
  $('button').on('click', () => {
    $('body').append(`<p><button>Another button</button></p>`);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>First Button</button>

实际上，这里的代码添加了三个按钮，但在CodePen上按预期工作。

所以，问题是，我应该如何应用（作为最佳实践）相同的逻辑，以便让新按钮受到 jQuery 函数的影响？

标签： javascriptjqueryhtmlecmascript-6