javascript - 附加克隆元素时应该使用clone(true)，还是使用on() 和clone(false)？

Question

克隆一个元素并将其附加到另一个元素时，最好从原始元素中克隆事件，还是使用 on() 以便不需要克隆事件？更好的基础是更快、使用更少的内存以及更正式的方式。请解释为什么一种方法比另一种更好。谢谢

不克隆事件的选项 1

$('#add').click(function(){$("#list").append($("#clone").clone(false));};
$("#list").on("click", "a", function(){alert('hello');});

克隆事件的选项 2

$('#add').click(function(){$("#list").append($("#clone").clone(true));};
$("#clone a").click(function(){alert('hello');});

两个选项共有的 HTML

<a href="javascript:void(0)" id="add">Click</a>
<li id="clone"><a href="javascript:void(0)">Click</a></li>
<ul id="list"></ul>

Answer 1

您应该使用事件委托（on选项）；主要好处是您不必在附加后附加另一个事件处理程序；只需事先定义事件处理。

主要的好处是您没有为每个对象附加一个新函数，这意味着消耗的内存更少；相反，事件将冒泡到相同的事件处理函数：

$("#list").on("click", "a", function(){alert('hello');});

// Don't run this after appending; you're already done setting up event handling.

Answer 2

事件委托稍微慢一点，但消耗的内存要少得多。它被认为是更清洁的方法。