在ajax调用HTML内容更改后，select2 jquery插件不起作用 [英] select2 jquery plugin not working after ajax calling for HTML content change

问题描述

我确实为html div更改调用了ajax函数，其中div更改内容具有"select2" jquery类以选择框.加载了ajax后，select2 jquery插件无法正常工作.

i did called ajax function for html div change, In that div change content have 'select2' jquery class to select box. After ajax loaded that select2 jquery plugin not working properly.

这是我的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

columnspage.html

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

select2 jquery插件的select2me类.

select2me class for select2 jquery plugin.

推荐答案

您需要在成功回调后初始化select，因为您的下拉列表是在DOM中动态添加的，

You need to initialize select after success callback, because your drop down is added dynamically in DOM,

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

这篇关于在ajax调用HTML内容更改后，select2 jquery插件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！