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

Should clone(true) be used when appending cloned elements, or on() with clone(false)?

本文关键字：clone on false true 元素      更新时间：2023-09-26

当克隆一个元素并将其附加到另一个元素时，是将事件从原始元素中克隆出来更好，还是使用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>

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

主要的好处是你不需要为每个对象附加一个新函数，这意味着消耗的内存更少;相反，事件将冒泡到相同的事件处理函数:

$("#list").on("click", "a", function(){alert('hello');});
// Don't run this after appending; you're already done setting up event handling.

事件委托稍微慢一点，但占用的内存少得多。它被认为是更简洁的方法。

相关文章：