使用Jquery克隆Select2

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還克隆附加事件。

請查看此處的文檔