Question

我正在使用clone（true，true）复制select和一些按钮进行克隆和删除。我认为第二个真正的参数应该确保将事件处理程序传递给克隆的子按钮。

这是标记：

<div id="clone-container">
    <div class="clone">
        <label for="select1">Select 1</label>
        <select id="select1" name="select1" class="">
            <option>Select One:</option>
            <option value="1">1</option>
        </select>
        <span class="controls">
            <a href="#" class="btn add">+</a>
            <a href="#" class="btn remove">−</a>
        </span>
    </div>
</div>

和js：

var $cloned = $('.clone').clone(true, true);
var $addButton = $(".btn.add");
$addButton.on("click", function(e) {
    e.preventDefault();
    var $cloner = $(this).closest(".clone");    
    $cloned.clone().insertAfter($cloner);
});

这是一个小提琴： http://jsfiddle.net/cjmemay/yXA4R/

Answer 1

以下是一个工作示例：http://jsfiddle.net/aT5mV/1/

我修改了on事件以捕获.btn.add上的所有点击次数，包含所创建的动态元素。

var $cloned = $('.clone').clone();

$('#clone-container').on("click", '.btn.add', function(e) {
    e.preventDefault();
    var $cloner = $(this).closest(".clone");    
    $cloned.clone().insertAfter($cloner);
});

Answer 2

您的代码存在两个问题：

原始克隆（$cloned）没有绑定到按钮的事件侦听器
您对clone的第二次调用不会保留事件

在将事件监听器附加到按钮后，您需要克隆容器。此外，您需要将true参数传递给clone的第二次调用：

var $addButton = $(".btn.add"); $addButton.on("click", function(e) { e.preventDefault(); var $cloner = $(this).closest(".clone"); $cloned.clone(true, true).insertAfter($cloner); }); var $cloned = $('.clone').clone(true, true);

以下是演示：http://jsfiddle.net/3hjfj/

Answer 3

您可以使用jQuery.detach（）代替.clone（true，true）;

这将是包含事件和所有内容的复制元素

Answer 4

尝试使用.clone(true,true)第二次克隆

jQuery .clone（true，true）不克隆对子项的事件绑定

4 个答案: