我试图克隆一个div，它包含一些输入，其中之一是Select2库，当克隆它克隆我，但库不工作。
附加的错误：“未捕获的类型错误：无法设置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++;
}
1条答案
按热度按时间umuewwlo1#
代码中有很多问题，但最大的问题是：
<select>并在页面上添加一些额外的HTML。如果你克隆Select 2所在的HTML块，你就克隆了所有额外的Select 2内容。如果你尝试将克隆的内容初始化为Select 2，它就不会工作。此修复已在SO上的许多重复问题中描述（尝试搜索“* select 2 clone*”），here's an example：您需要在 * 克隆之前 * 销毁原始Select 2，然后在克隆后将其重新初始化为Select 2;
代码中的其他一些问题包括：
row_examenes的元素。我将其添加为<div>，并将其包含在<div class="cloned">中;row_examenes），并且代码不会改变......重复的ID是无效的HTML。<input>都有相同的ID，txtinput0-这是无效的，和jQuery will only be able to find the first one。我把它们改为name0、email0和phone0;</div>，我添加的开放<div>也修复了这个问题;clone.find()来限定搜索范围以找到它们，所以 * 可能 * 这是可以的......但是，这似乎是不必要的风险，当我们不必这样做的时候-为什么不谨慎行事呢？并且搜索input而不是ID;<div clas="row box" id="clone"></div>-class中的排印错误;addRow()，所以我添加了一个简单的button和一个单击处理程序;下面是一个工作的简化代码片段，其中解决了这些问题：
第一个