将jQuery事件处理程序附加到dom元素的正确方法是什么？

Question

上下文

我有<div id='parent'>，我正在反复使用$('#parent').html('my new html text')更改其内容。在div中我有子节点，我将jQuery事件处理程序附加到他们的click事件。但是在更换子项后，处理程序位于旧元素上，因此我必须再次附加。

我担心一些资源浪费的影响，旧事件处理程序是否会锁定任何资源？ （或者我应该在更改父内容之前取消附加处理程序？）

非常相似的问题，但更复杂：假设我在孩子们身上使用jQuery插件。正常情况我写这样的东西：

$("<my selector which selects multiple children>").TouchSpin({
       // does not matter
    });

然而，在内容更改后，我必须重新应用插件。故事是一样的，我是否需要关注锁定的资源？如果我应该撤消插件适用于老孩子，我甚至不知道该怎么做。

问题

• 在动态可替换的dom元素上附加事件处理程序的正确方法是什么？
• 在动态可替换的dom元素上应用jQuery插件的正确方法是什么？

Answer 1

你应该delegate事件监听器总是附加到DOM的元素，如#parent或document：

$('#parent').on('click', '.dynamic_attached_element', () => {
   // Handle click event on '.dynamic_attached_element'
});

Answer 2

通过在选择器中使用类，您可以执行以下操作：

$(document).on('click', '.parent_element .child_element', function()( {
});

以上将确保事件仅附加在父元素中包含的动态元素上。

如果父元素始终存在，那么您可以将其更改为：

$('#parent').on('click', '.child_element', function()( {
});