使用 Select2 库复制 Div 时出错

Question

我正在尝试克隆一个包含一些输入的 div，其中之一是 Select2 库，在克隆它时会克隆我，但该库不起作用。

附加错误：“未捕获的 TypeError：无法设置 null 的属性（设置 'outerHTML'）”。

这是我的html代码。

<div class="cloned" style="width: 100%;">
    <div class="col-md-12 col-sm-12">
        <div class="form-group">
            <input class="form-control" id="txtinput0" name="username" placeholder="Enter Full Name" type="text" data-parsley-pattern="^[a-zA-Z\s.]+$" />
        </div>
    </div>
    <div class="col-md-12 col-sm-12">
        <div class="form-group">
            <input class="form-control" id="txtinput0" name="email" placeholder="Enter VALID EMAIL and check the result" type="email" />
        </div>
    </div>
    <div class="col-md-12 col-sm-12">
        <div class="form-group">
            <input class="form-control" id="txtinput0" name="phone" placeholder="Enter Phone e.g.: +363012345" type="text" data-parsley-pattern="^\+{1}[0-9]+$"/>
        </div>
    </div>
    <div class="col-md-12 col-sm-12">
        <div class="form-group">
            <select class="chosen-select" multiple="multiple" style="width: 100%;" id="select0" data-placeholder="Select a company" >
            <div clas="options">
                    <option value="1">Google</option>
<option value="1">Amazon</option>
<option value="1">Facebook</option>
<option value="1">Airbnb</option>
            </div>
            </select>
        </div>
    </div>
</div>
</div>
<div clas="row box" id="clone"></div>

这是我尝试克隆整个 div 的 javascript，包括 select2

$(document).ready(function() {
    $('#select0').select2();
});
    var i=1;
    var prev =0;
    function addRow() {
    var clone = $("#row_examenes").clone()
    clone.find("#txtinput"+prev).attr("id", "txtinput"+i);
    clone.find("#select"+prev).attr("id", "select"+i);
    clone.find("#select"+prev+"_chosen").attr("id", "select"+i+"_chosen1");
    clone.appendTo($("#clone"));
    document.getElementById("select"+i+"_chosen1").outerHTML=""
    $myid = $('#select' + i);
    $myid.show().select2();
    i++;
    prev++;
}

Answer 1

代码中存在不少问题，但最大的问题是：

• 当您初始化 Select2 时，它会隐藏原始的 <select> 并在页面上添加一些额外的 HTML。如果然后克隆 Select2 所在的 HTML 块，则克隆所有额外的 Select2 内容。然后，如果您尝试将克隆的东西初始化为 Select2，它将无法正常工作。

  该修复已在 SO 上的许多重复问题中进行了描述（尝试搜索“选择2克隆"),here's an example:你需要销毁原来的Select2前克隆它，然后在克隆后再次将其重新初始化为 Select2；

代码中的其他一些问题是：

• 没有 ID 为 row_examenes 的元素。我将其添加为<div>，并附上<div class="cloned">；

• 克隆该 div 后，克隆将具有相同的 ID (row_examenes)，并且代码不会更改...重复的 ID 是无效的 HTML；

• 所有 3x 文本 <input>s 具有相同的 ID，txtinput0 - 这是无效的，以及 jQuery will only be able to find the first one。我将它们更改为name0、email0 和phone0；

• HTML 有一个不平衡的</div>，我通过添加打开<div> 来解决这个问题；

• <div clas="row box" id="clone"></div> - class 中的错字；

• 没有办法触发addRow() 方法，所以我添加了一个简单的button，并为其添加了一个点击处理程序；

• 创建克隆后，在更新 ID 之前，它包含具有非唯一 ID 的元素。它实际上还没有在 DOM 中，并且您正在使用clone.find() 来确定范围，但这似乎仍然存在风险。最好保持简单和安全，并改为搜索inputs。

这是一个有效的、简化的 sn-p 解决了这些问题：

$(document).ready(function () {
    $('#select0').select2();
    
    $('button').on('click', addRow);
});

// How many clones on the page?
let clones = 0;

function addRow() {

    // We've added a clone
    clones++;

    // First need to destroy original select2, so the clone does not include
    // extra stuff select2 generates.
    $('#select0').select2('destroy');

    // Now create our clone
    let clone = $("#row_examenes .cloned").clone()

    clone.find('input[name="username"]').attr("id", "name" + clones);
    clone.find('input[name="email"]').attr("id", "email" + clones);
    clone.find('input[name="phone"]').attr("id", "phone" + clones);
    clone.find("select").attr("id", "select" + clones);

    // HTML is updated, add it to the DOM
    clone.appendTo($("#clone"));

    // Initialise the original select2
    $('#select0').select2();

    // And initialise our new select2
    $('#select' + clones).select2();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<button>Create a clone</button>

<div id="row_examenes">
    <div class="cloned">
        <div class="col-md-12 col-sm-12">
            <div class="form-group">
                <input class="form-control" id="name0" name="username" placeholder="Enter Full Name" type="text" />
            </div>
        </div>
        <div class="col-md-12 col-sm-12">
            <div class="form-group">
                <input class="form-control" id="email0" name="email" placeholder="Enter VALID EMAIL and check the result" type="email" />
            </div>
        </div>
        <div class="col-md-12 col-sm-12">
            <div class="form-group">
                <input class="form-control" id="phone0" name="phone" placeholder="Enter Phone e.g.: +363012345" type="text" />
            </div>
        </div>
        <div class="col-md-12 col-sm-12">
            <div class="form-group">
                <select class="chosen-select" multiple="multiple" id="select0" >
                    <div clas="options">
                        <option value="1">Google</option>
                        <option value="1">Amazon</option>
                        <option value="1">Facebook</option>
                        <option value="1">Airbnb</option>
                    </div>
                </select>
            </div>
        </div>
    </div>
</div>

<div class="row box" id="clone"></div>