クローンボタンがクリック機能で機能しない

Question

次のスニペットでは、入力とその隣に削除ボタンがあります。それらは複製することができ、各削除ボタンは、どの入力が削除しようとしているかを知らせる機能を持っています。

奇妙なことは、スニペットを実行すると完全に機能することです。

私のブラウザでは、クローンボタンは関数を呼び出すのではなく、元のものだけを呼び出します。また、「削除」というタイトルは、他のボタンにマウスを置いても、最初のボタンにのみ表示されます。

この問題の原因は何ですか？

私はスニペット内のすべてのものと同じバージョンを使用しています。あなたの新しいボタンを見つけ、それをクリック機能を割り当てるclonig後

$("#clone").click(function() { 
 
    var currentCount = $("#tablePhones tbody tr").length; 
 
    var newCount = currentCount + 1; 
 

 
    $('#tablePhones tbody>tr:last').clone(true).insertAfter('#tablePhones tbody>tr:last'); 
 
    $('#tablePhones tbody>tr:last').find("input, a").each(function() { 
 
    var newId = $(this).attr("id").replace("_" + currentCount, "_" + newCount); 
 
    var newName = $(this).attr("name").replace("_" + currentCount, "_" + newCount); 
 
    $(this).attr("id", newId).attr("name", newName); 
 
    if ($(this).is("input")) { 
 
     $(this).val(""); 
 
    } 
 
    }); 
 
}); 
 

 
$(".btn.remove").click(function() { 
 
    name = $(this).attr("name"); 
 
    console.log(name); 
 
});

td .btn.aligned { 
 
    position: absolute; 
 
    margin-top: 7px; 
 
    float: right; 
 
    margin-left: 5px; 
 
} 
 

 
td input { 
 
    float: left; 
 
    margin-bottom: 10px; 
 
}

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
 
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://use.fontawesome.com/a06b1c7829.js"></script> 
 

 
<a id="clone" class="btn btn-primary"> 
 
    <i class="fa "></i> Clone 
 
</a> 
 

 
<table id="tablePhones" class="table table-hover"> 
 
    <thead class="thead-inverse"> 
 
    <th>Phone numbers</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <div class="row col-xs-3"> 
 
      <input type="text" name="phone_1" id="telefono1_1" class="form-control" /> 
 
      <a title="Remove" name="removephone_1" id="removephone_1" class="btn btn-danger btn-xs aligned remove"><span class="fa fa-times"> 
 
      </span> 
 
      </a> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

は、DOM要素を挿入、新しく作成されたためにイベントリスナーの添付ファイルに関連する問題/でなければなりません。

$(document).on("click", ".btn.remove" ,function() { 
    name = $(this).attr("name"); 
    console.log(name); 
}); 

Answer 2

：

var newRow = $('#tablePhones tbody>tr:last').clone(true).insertAfter('#tablePhones tbody>tr:last'); 
$(newRow).find(".btn.remove").click(function(){ 
    name = $(this).attr("name"); 
    console.log(name); 
}); 

Answer 3

オブジェクトをクローンすると、クリックハンドラはクローン作成されません。

添付オブジェクトに1つのクリックハンドラーをインストールしてみてください。$(".btn.remove").on('click')の代わりに$('#tablePhones').on('click', 'a.btn.remove')を使用してください。