jQueryでtrとcheckboxイベントをクローズ

Question

私は<tr>をクローンしなければなりません。以下のようなチェックボックスのリストがあります。チェックボックスのリストを新しい行に追加して、チェックボックスをクリックして値を表示してください。field_resultsまだクローンではない最初のテキストボックスにのみ表示されます。 どのように新しいtrを追加したら、どのtrのチェックボックスのリストをクリックすると、同じtrのクリックの値が表示されますか？

$("#add-new").on("click", function() {       
 
    $tr = $(this).closest("tr").next().clone(true); 
 
    $tr.insertAfter($(this).closest("tr")); 
 
}); 
 

 
$(document).ready(function() { 
 
    $checks = $('#mych_box :checkbox'); 
 
    $checks.on('change', function() { 
 
    var string = $checks.filter(":checked").map(function (i, v) { 
 
     return this.value; 
 
    }).get().join(","); 
 
    console.log(string); 
 
    $('#field_results').val(string); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<tr> 
 
    <td> 
 
     <button type="button" id="add-new">Add New</button> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td> 
 
    <input type="text" id="field_results" name="field_results[]"/><br> 
 
    <div class="multiselect" style="height: 100px;width: auto;" id="mych_box"> 
 
     <label> 
 
      <input type="checkbox" id="virt_software_chb1" name="virt_software[]" value="White"/>White 
 
      <input type="checkbox" id="virt_software_chb2" name="virt_software[]" value="Red"/>Red 
 
      <input type="checkbox" id="virt_software_chb3" name="virt_software[]" value="Blue"/>Blue 
 
     </label> 
 
    </div> 
 
    </td> 
 
</tr>

Answer 1

あなたには `true`に渡す必要があり、デフォルトのイベントをバインドし、

 $(".virt_software_chb").on('change', function() { 
 
      var string = $(this).closest('td').find('.virt_software_chb').filter(":checked").map(function (i, v) { 
 
       return this.value; 
 
      }).get().join(","); 
 
      $(this).closest('td').find('.field_results').val(string); 
 
     }); 
 
     
 
$("#add-new").on("click", function() {       
 
    $tr = $(this).closest("tr").next().clone(true); 
 
    $tr.insertAfter($(this).closest("tr")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
    <td> 
 
     <button type="button" id="add-new">Add New</button> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td> 
 
    <input type="text" class="field_results" name="field_results[]"/><br> 
 
    <div class="multiselect" style="height: 100px;width: auto;" id="mych_box"> 
 
     <label> 
 
      <input type="checkbox" class="virt_software_chb" name="virt_software[]" value="White"/>White 
 
      <input type="checkbox" class="virt_software_chb" name="virt_software[]" value="Red"/>Red 
 
      <input type="checkbox" class="virt_software_chb" name="virt_software[]" value="White"/>White 
 
     </label> 
 
    </div> 
 
    </td> 
 
</tr> 
 
</table>

Answer 2

withDataAndEvents（デフォルト：false）

ブールイベントハンドラは、要素とともにコピーされるべきかどうかを示します。 jQuery 1.4以降、要素データも同様にコピーされます。 - clone()

trueを渡してみてください。

$tr = $(this).closest("tr").next().clone(true);