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 部分页面（模态））上，我引用了必要的脚本和样式。

谢谢！

**** 更新 ****

所以，上面的部分页面基本上是作为模态弹窗使用的。 “父”页面具有此代码。 （此代码有效，并且效果正确应用于插件，但不是克隆的。）

       $('#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/