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

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