select2 jquery 插件在 ajax 调用 HTML 内容更改后不工作

Question

我确实为htmldiv变化调用了ajax函数，其中div变化内容有'select2'jqueryclass 到 select 框。 ajax 加载后 select2 jquery 插件无法正常工作。

这是我的 js:

$('body').on('click', '.portlet > a.reloadcontent', function(e) {
   $.ajax({
      type: "GET",
      cache: false,
      url: url,
      dataType: "html",
      success: function(res) {
          $('#colpart').find('.portlet-body').html(res);
      }
   });
});

这是我的 HTML:

<div id="#colpart">
    <a href="#" data-url="columnspage.html" class="reloadcontent" data-load="true">Columns</a>
    <div class="portlet-body"></div>
</div>

columnspage.html

<select class="form-control select2me" data-placeholder="">
     <option value=""></option>
     <option value="1">Column 1</option>
 </select>

select2me class 用于 select2 jquery 插件。

Answer 1

您需要在成功回调后初始化select，因为您的下拉列表是在DOM、

中动态添加的

success:function(res){
   $('#colpart').find('.portlet-body').html(res);
   // reinit your plugin something like the below code.
   $('.select2me').select2();
}

Answer 2

在ajax成功函数中你需要初始化select。

示例：

    success: function (html) {
        // your code here
        $(".select2").select2(); // init the select
    }

select2 jquery 插件在 ajax 调用 HTML 内容更改后不工作

select2 jquery plugin not working after ajax calling for HTML content change

jquery

html

ajax

jquery-select2