Плагин select2 jquery не работает после вызова ajax для изменения содержимого HTML

Question

Я вызвал функцию ajax для изменения html div, в этом содержимом изменения div есть класс jquery select2 для выбора поля. После загрузки 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 класс для плагина select2 jquery.

jquery html ajax jquery-select2

4

Muthu 23 Фев 2015 в 15:50

Answer 1

Вам необходимо инициализировать выбор после успешного обратного вызова, потому что раскрывающийся список динамически добавляется в DOM,

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

8

Rohan Kumar 23 Фев 2015 в 12:52

Answer 2

В функции успеха ajax вам необходимо инициализировать select.

Примере:

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

0

klawrow 24 Июл 2018 в 21:38

Плагин select2 jquery не работает после вызова ajax для изменения содержимого HTML

2 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

jquery