Question

嗨！伙计们，我对JQuery一无所知......请帮助我。

如果用户想要其他输入字段，我使用按钮添加另一个字段创建了bootstrap表单。新字段是从原始字段克隆的。

日期选择器最初没有工作（在克隆字段上）所以我添加了代码来解决这个问题...（我很幸运，我花了7个小时才弄清楚了）..

然后我发现即使克隆的选择框也不起作用。 - ＆GT;由于选择器使用ID（＃e1），我认为这是一个原因，因此我将其更改为类（.e1）。这没有用。 - ＆gt;所以我尝试了相同的方法（就像我在日期选择器上做的那样），但它也失败了..

以下是代码： - ＆GT;在页面标题

    <script src="assets/js/jquery-2.0.3.min.js"></script>

<script>

    function cloneRow()
    {

        var row = document.getElementById("rowToClone"); // find row to copy
        var num = Math.floor((Math.random() * 500) + 1); 
        var table = document.getElementById("tableToModify"); // find table to append to

        var clone = row.cloneNode(true); // copy children too
        clone.id = "row" + num; // change id or other attributes/contents
        table.appendChild(clone); // add new row to end of table
        clone.querySelectorAll('[id="id-date-picker-1"]')[0].id = "id-date-picker-" + num;  //Put Unique ID   

    //For Selector
    $(function(){

        $('.e1').select2();

        $('.clone').click(function() {

            var clone = $('.select2').clone();

            var cloned = clone.find('.e1');
            cloned.removeClass('select2').removeAttr('id');

            clone.appendTo('.elements');
            $(cloned).select2();

        });
    });


    }
</script>

要克隆的行

<tbody id="rowToClone">
<tr>
    <td>

        <div class="form-group" style="width: 100%;">
    <select class="e1" style="width:100%;">
        <option value="AL" />Alabama
        <option value="AK" />Alaska
        <option value="AZ" />Arizona
    </select>

        </div>

    </td>

    <td>

        <div class="form-group" style="width: 100%;">
    <select class="e1" style="width:100%;">
        <option value="VA" />Virginia
        <option value="WA" />Washington

    </select>
        </div>
     </td>
 </tr>

- ＆GT;触发按钮

<button type="button" onclick="cloneRow()" class="btn btn-default purple"><i class="fa fa-plus"></i> Add </button>

- ＆gt;页脚

//On Page Footer

    //--Jquery Select2--
    $(".e1").select2(); //I added this line
    $("#e1").select2();
    $("#e2").select2({
        placeholder: "Select a State",
        allowClear: true
    });

- ＆GT;请帮助我......我将不胜感激。

Answer 1

一些问题（你的选项HTML无效），但很多插件，改变了DOM，根本不喜欢被克隆。它们将实例信息存储在元素data中，并且通常不可重入（无法将插件重新应用于已经更改DOM的元素）。

由于将现有行进行克隆可能会变得混乱，我建议采用略有不同的克隆方法，以避免这些问题。

只需在页面中保留一个单独的模板行，您可以在虚拟脚本块中进行克隆：

<script id="rowToClone" type="text/template">
    <tr>
        <td>
            <div class="form-group" style="width: 100%;">
                <select class="e1" style="width:100%;">
                    <option value="AL">Alabama</option>
                    <option value="AK">Alaska</option>
                    <option value="AZ">Arizona</option></select>
            </div>
        </td>
        <td>
            <div class="form-group" style="width: 100%;">
                <select class="e1" style="width:100%;">
                    <option value="VA">Virginia</option>
                    <option value="WA">Washington</option></select>
            </div>
        </td>
        <td>
            <div class="form-group" style="width: 100%;">
                <input type="text" class="datapicker"/>
            </div>
        </td>
    </tr>
</script>

type="text/template"未知，因此所有浏览器都会忽略script。

然后克隆变得如此简单：

$('#clonerow').click(function(){
    $('#table tbody').append($('#rowToClone').html());
    // now apply any plugins to the new row
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/j1smswmt/2/

以下是适用于每个新行的datepicker的扩展版本：

$('#clonerow').click(function(){
    $('#table tbody').append($('#rowToClone').html()).find('tr:last .datapicker').datepicker();
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/j1smswmt/3/

备注：

您的选项目前无效。您需要将文本括在匹配<option>＆amp; </option>代码。

当您使用jQuery时，请避免使用内联onclick处理程序。他们将事件注册与事件处理程序分开，没有任何实际好处。改为以jQuery的方式做。

Answer 2

如果有人仍然遇到此问题但仍想使用jQuery克隆：

如果您使用的是Bootstrap，实际上只需要删除bootstrap-select，然后重新初始化正常的克隆选择。

执行克隆后，只需添加以下两行代码：

clone.find('.bootstrap-select').remove();
clone.find('select').selectpicker();

基于此Github问题的回答：https://github.com/silviomoreto/bootstrap-select/issues/605

克隆后，选择元素不起作用

2 个答案: