2015-04-28 2 views
0

Я использую AJAX для загрузки контента, который отлично работает при загрузке с помощью DOM, но при загрузке AJAX он не инициализируется.Загруженный контент AJAX не инициализируется (prettyPhoto)

Я не совсем уверен, как это исправить.

Example (the basic loaded DOM)

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

Я на 99% уверен, что это связано с тем, что элемент загружается в DOM после инициализации.

Пример фрагмента кода, который должен нагружать при нажатии предваротельного просмотра

<div class="img-thumb"> 
    <a vdh-685872771="" data-pp="prettyPhoto[blog-gallery]" href="//xxxxxxxxxxxx.eu/home/scripts/<? echo $licensePath; ?>" title="Fashion and Style for the Future"> 
    <div class="img-thumb-hover"> 
     <i class="im-expand2"></i></div> 
    </a> 
    <img alt="blog-image" class="img-responsive" src="//xxxxxxxxxxxx.eu/home/scripts/<? echo $licensePath; ?>"> 
</div> 
+1

Вы правы! Посмотрите на делегацию событий и главным образом на функцию .on(). Вам нужно запустить jQuery для элементов, которые не находятся в DOM при загрузке страницы –

+0

См. Http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Jasen

ответ

0

Так я нашел решение моей проблемы. Проблема связана с DOM, как заявила @Lelio Faieta. Однако после долгих чтений я вернулся к исходной документации для prettyPhoto конкретного сценария, который, кажется, является проблемой здесь.

Там я нашел это очень приятное решение с prettyPhoto и Ajax.

Для возврата содержимого с помощью AJAX и его инициализацию вы можете сделать следующее с атрибутом вашего a

rel="prettyPhoto[ajax]" 

rel Заявляя ajax в скобках prettyPhoto, это позволяет добавить содержимое в DOM с очень небольшим усилием.

Пример полной a для загрузки через AJAX.

<a rel="prettyPhoto[ajax]" href="//xxxxxxx.eu/home/scripts/<? echo $licensePath; ?>">Ajax content</a> 

Это работает без необходимости добавлять какие-либо новые функции или редактировать любые существующие функции.

PrettyPhoto Documentation

Смежные вопросы