javascript - 动态加载的div的事件名称

我正在使用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"
     });
});

我尝试了事件名称的加载，更改。我无法进行多重选择，因为我输入了错误的事件名称。有人可以告诉我事件名称的确切含义吗？

最佳答案

您可以使用flag属性手动跟踪

$(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);
     }
 });