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/

jQuery clone - 生成的克隆控件不起作用

1 个答案: