Question

我正在使用select2在网页上选择多个项目

我在ajax调用页面上动态加载了div。

动态加载div ::

<div class="select2" multiple="multiple">
 <option>Mango</option>
 <option>Banana</option>
 <option>Apple</option>
</div>

我有一个js文件

$(document).ready(function() {
    $(".select2").select2({
       placeholder: "select fruits"
     });
});

我知道这不会起作用，因为最初加载页面时，select2类的div不存在（稍后由ajax添加）。

我试图使用

使其工作

 $(document).on(eventname,'.select2',function() {
     $(".select2").select2({
       placeholder: "select fruits"
     });
});

我尝试加载事件名称，更改。我无法进行多重选择，因为我给出了错误的事件名称。有人可以告诉我事件名称究竟是什么。

Answer 1

您可以使用标记属性

手动跟踪

$(document).ready(function() {
    $(".select2").select2({
       placeholder: "select fruits"
     });
     $(".select2").attr('data-has-select', 1);
});

和

 $(document).on('click', '.select2', function() {
     if (!$(this).attr('data-has-select')) {
         $(this).select2({
             placeholder: "select fruits"
         });
         $(this).attr('data-has-select', 1);
     }
 });

动态加载的div

1 个答案: