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」類（克隆過程中）的原因是每次點擊按鈕時，第一次單擊後會添加太多的行）。

僅供參考：複選框使用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> 

對於克隆的控件，我現在可以使用除下拉列表外的所有克隆控件。當我點擊下拉列表的第一行上的原有開闢了......

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/