javascript - 克隆后选择元素不起作用

Question

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

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

日期选择器一开始不起作用(在克隆字段上)，所以我添加代码来解决这个问题..(我很幸运做到了，我花了 7 个小时才得到正确的结果)..

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

代码如下: -> 在页眉处

    <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>     

-> 触发按钮

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

->页脚

//On Page Footer

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

->请帮助我..我将不胜感激。

Answer 1

有几个问题(您的选项 HTML 无效)，但是很多更改 DOM 的插件根本不喜欢被克隆。它们将实例信息存储在元素 data 中并且通常不可重入(无法将插件重新应用到已经发生 DOM 更改的元素)。

由于克隆现有行可能会变得困惑，我建议采用稍微不同的克隆方法，这将避免这些问题。

只需在页面中保留一个单独的模板行，您可以在虚拟脚本 block 内克隆该模板行:

<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> 内& </option>标签。
• 当您使用 jQuery 时，请避免使用内联 onclick处理程序。他们将事件注册与事件处理程序分开，但没有任何实际好处。请改为使用 jQuery 方式。