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

Question

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

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

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

因此我在搜索$(document).change()函数，发现this solution最适合我的情况：

$(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函数的影响，我应该如何应用（作为最佳实践）相同的逻辑？