Question

我尝试在点击时克隆容器并在最后一个元素后追加。克隆的容器包含select2下拉框。我的问题是我无法在新的附加容器中选择

的Fiddler http://jsfiddle.net/lgtsfiddler/ypp33/1/

我正在尝试的代码

jQuery('div.wizard-card').on('click', 'button.add_more', function(e) {
            e.preventDefault();
            if (countContainers() == true) {
                jQuery(this).closest('button').prop('disabled', true);
            }

            jQuery('.uni_choice:last').clone().insertAfter('.uni_choice:last');
            jQuery('.uni_choice').prev().find('button.add_more').replaceWith('<button class="delete btn btn-file"><i class="icon-minus"></i></button>');
        });

Answer 1

要克隆事件，您需要将{true}参数添加到clone并提供单独的ID

jQuery('.uni_choice:last').clone(true).attr('id', 'sample')

您可以查看http://jsfiddle.net/raunakkathuria/ypp33/3/

截至目前，它将在父节点上触发事件，因为您使用jquery将自定义事件绑定到它。你需要分析那个

Answer 2

要克隆select2元素，不能使用深度jQuery克隆。

我找到的唯一方法是销毁插件的当前实例，然后重新创建所有插件。

价：

破坏

恢复由Select2完成的DOM更改。通过Select2完成的任何选择   将保留。

代码：

 jQuery('div.wizard-card').on('click', 'button.add_more', function (e) {

     $('select.locations, select.grade').each(function (key, value) {
         $(this).select2("destroy");
     });

     e.preventDefault();
     if (countContainers() == true) {
         jQuery(this).closest('button').prop('disabled', true);
     }

     jQuery('.uni_choice:last').clone().insertAfter('.uni_choice:last');
     jQuery(this).closest('button.add_more').replaceWith('<button class="delete btn btn-file"><i class="icon-minus"></i></button>');

     jQuery('select.locations').select2({
         placeholder: 'Alle Städte',
         allowClear: true
     })

     jQuery('select.grade').select2({
         placeholder: 'Alle Abschlusse',
         allowClear: true
     })

 });

演示：http://jsfiddle.net/IrvinDominin/dC463/

无法访问在流上创建的select2

2 个答案: