jQueryクローン - 結果としてクローン化されたコントロールは機能しません

Question

asp.net/mvc5ウェブサイトで作業しています。

データテーブルの高度なフィルタリングに使用されると思われるモーダルダイアログ（MVC 5の部分ページ）があります。ユーザーができるだけ多くのフィルタリング「項目」/行を追加または削除できるようにしたいと思っていました。フィルタコントロールは、「filter_row」クラスの行にあります。ここでは、モーダルボディコードです....

  <div class="modal-body" style="height: 300px;"> 
       <div class="row filter_row"> 
        <div class="col-lg-12"> 
         <div class="checkbox i-checks inline-block"> 
          <input type="checkbox" value=""> 
         </div> &nbsp; 
         <select data-placeholder="Choose..." class="chosen-select" style="width: 150px;"> 
          <option value="">First Name</option> 
          <option value="">Last Name</option> 
          <option value="">DOB</option> 
          <option value="">SSN</option> 
          <option value="">City</option> 
          <option value="">State</option> 
          <option value="">Zip</option> 
          <option value="">Account</option> 
         </select> 
         &nbsp; 
         <input type="text" placeholder="" class="form-control inline-block" style="width: 200px;"> 
         &nbsp;&nbsp;&nbsp; 
         <a href="#" onclick="$(this).closest('.filter_row_clone').remove();"><i class="fa fa-trash" aria-hidden="true"></i></a> 
        </div> 
       </div> 
      </div> 

私は、行が重複することになって、それがあるされて追加ボタン（+）をクリックします。この部分はうまく動作します。 （下の画像を参照してください（+）を数回クリックしてください）問題は、クローンしたコントロールをクリックしたり使用したりすることができないことです。ここにスクリーンショットがあります。このスクリーンショットでは、行1のみがクリック可能です。ここで

はここ

<a href="#" onclick="addRow();"> 
    <i class="fa fa-plus-circle" aria-hidden="true"></i> 
</a> 

が....

（以下の更新されたコードを参照してください）主な機能のAddRowです....ヘッダーでの私の "追加" ボタンのコードです

function addRow() { 
    $(".filter_row").clone(true, true).removeClass("filter_row").addClass("filter_row_clone").insertAfter("div.filter_row:last"); 
}; 

（クローン時にメインの「filter_row」クラスを削除した理由は、ボタンをクリックするたびに最初のクリック後に余分な行が追加されたためです）

FYI：チェックボックスはiCheckプラグインを使用しており、ドロップダウンは選択したプラグインを使用しています。メインの親フォーム（このMVCの部分ページ（モーダル）が呼び出される）で、必要なスクリプトとスタイルを参照します。

ありがとうございます！

**** **** UPDATE

ので、上記の部分ページは基本的にモーダルポップアップとして使用されています。 「親」ページにはこのコードがあります。 （このコードの動作と効果は、プラグインではなく、クローン化されたものに正しく適用されます。）

 $('#AdvancedSearch') 
     .on('shown.bs.modal', 
      function (e) { 
       // the custom checkbox plugin 
       $('.i-checks').iCheck({ 
        checkboxClass: 'icheckbox_square-green', 
        radioClass: 'iradio_square-green' 
       }); 

       // the "chosen" plugins 
       $(".chosen-select").chosen({ 
        disable_search_threshold: 10, 
        no_results_text: "Oops, nothing found!" 
       }); 

      }); 

（感謝@StephenMuecke）以下の提案を使用して、ここで私の新しいのAddRow（）関数があります....

<script> 
function addRow() { 
    $(".filter_row").clone(true, true).first().insertAfter("div.filter_row:last"); 
    $('.chosen-select').last().chosen(
     { 
      disable_search_threshold: 10, 
      no_results_text: "Oops, nothing found!" 
     } 
    ); 
    $('.chosen-select').last().chosen(); 
    $('.i-checks').last().iCheck({ 
     checkboxClass: 'icheckbox_square-green', 
     radioClass: 'iradio_square-green' 
    }); 
}; 
</script> 

クローンされたコントロールの場合、ドロップダウンを除くすべてのクローンコントロールを使用できるようになりました。私は、ドロップダウンリストをクリックすると、1行目のオリジナルのものは

Answer 1

はこれを試してみてください...開きます。これがあなたが望むものなのかどうかわかりません。あなたがそれを試した後に教えてください。

<a href="#"> 
    <i class="fa fa-plus-circle" id="test" aria-hidden="true">Button</i> 
</a> 
<div class="row filter_row"> 
    <select class="" name="txtCategory[]" id="category1"> 
     <option value="">Option 1</option> 
     <option value="">Option 2</option> 
     <option value="">Option 3</option> 
     <option value="">Option 4</option> 
    </select> 
</div> 



$("#test").on("click", clone); 

function clone(){ 
    $(".filter_row").clone(true, true).removeClass("filter_row").addClass("filter_row_clone").insertAfter("div.filter_row:last"); 
} 

https://jsfiddle.net/7gddtnee/