3

我正在使用 clone(true, true) 来复制选择和一些按钮来克隆和删除。我认为第二个真正的参数应该确保将事件处理程序传递给克隆的子按钮。

这是标记：

<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">−&lt;/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);
});​

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

4

4 回答 4

3

您可以使用 jQuery.detach() 代替 .clone(true,true);

那将是带有事件和所有内容的复制元素

于 2016-03-08T02:42:52.453 回答
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);
});
​
于 2013-01-01T18:28:01.273 回答
1

您的代码有两个问题：

  1. 原始克隆 ( $cloned) 没有绑定到按钮的事件侦听器
  2. 您的第二次调用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/

于 2013-01-01T18:34:08.377 回答
0

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

于 2013-01-01T18:28:30.193 回答