ползунки jquery не работают при загрузке через ajax

Question

Я использую плагин слайдера jquery для создания слайдеров.Это прекрасно работает, когда я загружаю их напрямую, когда dom инициируется, однако, когда я пытаюсь загрузить ползунки в div, используя метод ajax innerHTML, они не инициируются.

Кто-нибудь знает, как я могу это сделать?

Answer 1

Вы должны начать / связать свои события снова.

например

//Ajax done and innerHTML is set
$('container').slider(); //Just an example... this will bind events.

Или

Вы можете изменить обработчики событий на .live.Это обрабатывает динамический контент.

Answer 2

Ползунки не инициализируются при их создании настройками innerHTML объекта.Попробуйте вместо этого (для ползунка диапазона):

$.ajax({
  url: "get_slider.php",
  success: function(data){
    if(typeof(data) == 'string') data = JSON.parse(data);
    $('#my_slider_id').slider({
            range: true,
            min: data.min,
            max: data.max
        });
  },
  error: function(data){
    // Something went wrong, do stuff here
  }
});

Здесь мы ожидаем, что get_slider.php вернет объект JSON, содержащий по крайней мере свойство min и max для создания экземпляра ползунка.

Answer 3

Попробуйте использовать свойство OnComplete в методе $ .ajax, чтобы вызвать метод для ползунков. Это обеспечит запуск метода только после загрузки содержимого AJAX.

Answer 4

Когда вы добавляете ползунки в div с помощью innerHTMl, вы должны снова вызывать методы настройки ползунков, чтобы события добавлялись в ползунки, когда ползунки добавляются в div. Спасибо Ashwani