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

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

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

日期选择器起初没有作用（在克隆字段上），所以我添加了代码来解决该问题..（我很幸运做到了，我花了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
    });

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

最佳答案

有几个问题（选项的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>和</option>标记内。
在使用jQuery时，请避免使用内联onclick处理程序。他们将事件注册与事件处理程序分开，没有任何实际好处。而是使用jQuery方式。

关于javascript - 选择元素在克隆后不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29963847/