jquery - jQueryの.clone（true、true）は、子のイベントバインディングのクローンを作成しません

Question

clone（true、true）を使用して選択をコピーし、いくつかのボタンを使用してクローンを作成して削除しています。2番目の真の引数は、イベントハンドラーが複製された子ボタンに渡されることを保証する必要があると思いました。

マークアップは次のとおりです。

<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/

Answer 1

コードには2つの問題があります。

1. 元のクローン（$cloned）には、ボタンにバインドされたイベントリスナーがありません
2. の2回目の呼び出しでcloneは、イベントは保持されません

イベントリスナーをボタンにアタッチした後、コンテナのクローンを作成する必要があります。さらに、 ：trueの2番目の呼び出しに引数を渡す必要があります。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 2

これが実際の例です: 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 3

.clone(true,true)tooを使用して 2 回目のクローンを作成してみてください