追加克隆的元素时应使用clone（true）还是将clone（false）与on（）一起使用？

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

事件委派速度稍慢一些，但占用的内存却少得多。 并且它被认为是更清洁的方法。