select2 jquery插件在ajax調用HTML內容更改後無法正常工作

Question

我確實爲html div更改調用了ajax函數，在那個div更改內容中有'select2'jquery類來選擇框。 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類選擇2 jQuery插件。

Answer 1

需要初始化成功回調之後選擇，因爲你的下拉在DOM動態添加，

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