克隆后为什么有几个块不能工作？

Question

我很抱歉，如果问题制定草率。我只是在了解jQuery开始的某个地方。

我想实现基于拖放的表单生成器。

我添加了按钮来克隆被删除的元素。 但克隆后“删除”和“克隆”按钮不起作用。

jsfiddle.net/284mx1vn/

感谢您的帮助！

Answer 1

我刚刚调整您的Fiddle

我已经添加了两行

$(document).on("click", ".remove", function(){ 
    $(this).closest(".input-block").remove();}); 
$(document).on("click", ".add", function(){ 
    $(this).closest(".input-block").clone().appendTo("#drop-space"); 
}); 

因此它可以用于动态创建的元素，并添加了类“添加”到“添加” - 按钮以方便使用。
问题在于，当文档加载时，必须将事件绑定到DOM中已存在的元素。作为解决方案，可以使用事件委托 - 意味着从静态父元素委派事件（在这种情况下为按钮的点击事件），例如， $(document)。这个父元素将使用jquery on()函数将该事件委托给该类的所有子类，即使这些元素稍后添加。
参考：http://api.jquery.com/on/和https://api.jquery.com/on/#on-events-selector-data-handler，部分“直营和委托事件”：

“事件处理程序只能绑定到当前选定的元素，它们必须存在在页面上当时您的代码调用。上（）。”