Question

我遇到了使用select2下拉来克隆div的问题。

当初始页面加载时显示第一个时，select2工作正常。当我单击按钮来克隆它时，下一个select2不会。它就像是被禁用而且无法工作。

我的代码如下;

<div class="input-main white_bg cloneneedsanalysis">
<div class="action-input clone-needs-analysis">
<div class="action-input-white-shorter">
<div class="inner-sub-title-less-padding">
<p>Audience Analysis</p>
</div>
<div class="col-md-12">
<div class="form-group">
<select class="select2 select2-multiple need_analysis_selector" multiple="multiple" data-placeholder="Choose ..." name="needs_analysis[]">
<option value="">-- Choose Audience Categories --</option>
<option value="536"> Finance -  - Cash collection</option>
<option value="537">IT -  - Comms IT</option>
<option value="538">Strategy -  - Strategy team 1</option>
</select>
</div>
</div>
</div>
<div class="action-input-plus-needs-analysis">
<a href="#" class="clone_needs_analysis_button">
<img src="http://www.test.com/assets/images/plus.jpg"></a>
</div>
<div class="action-input-remove-needs-analysis">
<a href="#" class="remove_needs_anaylsis_button">
<img src="http://www.test.com/assets/images/minus.jpg"></a>
</div>
</div>
</div>


$(document).on('click', '.clone_needs_analysis_button', function(e) {
    e.preventDefault();
    $(this).closest('.clone-needs-analysis').clone().insertAfter('.cloneneedsanalysis:last');
    $(this).closest('.action-input-plus').hide();
    $(this).closest('.action-input-remove').removeClass('hidden');
    $('.select2').select2();
});

Answer 1

使用$(this).closest('.clone-needs-analysis').clone(true, true)代替$(this).closest('.clone-needs-analysis').clone()。

您需要指定true, true参数以告知JQuery还克隆附加事件。

查看文档here

使用Jquery克隆Select2

1 个答案: