Ошибка ползунка галереи при загрузке контента через AJAX в jQuery

Question

Я использую плагин jQuery ( ссылка ) для перетаскивания внешних страниц в div на моей домашней странице, и каждая из внешних страниц содержит горизонтальный слайдер галереи на основе jQuery.

Пример: http://www.iamtimothylong.com/example

Вы заметите, что когда внешние страницы загружаются с помощью запроса AJAX (нажав «книга первая» или «книга вторая»), горизонтальный ползунок на этих внешних страницах перестает работать.

Тем не менее, горизонтальный ползунок работает, если статически размещен в div (просто, чтобы было ясно, что это не проблема с самим ползунком).

Кто-нибудь знает решение / обходной путь? Один парень сказал

"Вам нужно привязать ползунок к новым элементам после завершения запроса XHR. Внутри обработчика успеха вашего запроса AJAX выполните привязку mScrollBar ()."

К сожалению, я - программист, и мне нужно, чтобы это было изложено с точки зрения неспециалистов. :)

А источник загрузчика AJAX находится здесь: /js/menu.js

Answer 1

Я бы сказал, что это классический случай замены события, которое не запускается, на .live('event')

В основном, когда JavaScript запускается и присоединяет обработчики событий при загрузке страницы (или всякий раз, когда они вызываются), он прикрепляет их к существующим в данный момент элементам, которые существуют на странице в то время, поэтому при загрузке нового содержимого (через AJAX) эти события не присоединяются к только что загруженным событиям содержимого и соответствуют селектору.

Чтобы исправить это, jQuery имеет событие .live(), которое соответствует любым существующим в настоящее время элементам DOM И будущие, добавленные динамически.