Не работает JS после подгрузки на AJAX

Приветствую всех!

Долго искал в гугле решения проблемы, но увы скила не хватает понять ее решение.
Есть код для загрузки гиф:

$('.gif-with-play').on('click', function() {

var $this = $(this),
$img = $this.children('img'),
$imgSrc = $img.attr('src'),
$imgSrcgif = $img.attr('data-srcgif'),
$imgExt = $imgSrcgif.split('.');
if($imgExt[2] === 'gif') {
$this.addClass('loading-hide');

$img.attr('src', $img.data('srcgif')).attr('data-srcgif', $imgSrc);

$($img).load(function(){
$this.removeClass('loading-hide');
});
} else {
$img.attr('src', $imgSrcgif).attr('data-srcgif', $img.data('srcgif'));
}

$this.toggleClass('play');

});

Проблема в том, что после загрузки ленты по средствам AJAX, click не работает, гиф не загружает. Помогите, кто вкурсе. Буду очень признателен.

4 комментария

avatar
Попробуйте заменить первую строку на:
$(document).on('click','.gif-with-play', function(){
avatar
Вместо $(document) лучше указать id какого либо контейнера, в котором находится ссылка .gif-with-play и который «видим» до ajax-подгрузки. Если у вас шаблон на основе стандартного, то примерно так:
$('#content').on('click','.gif-with-play', function(){
avatar
Попробовал, теперь даже внутри топика клик не срабатывает
avatar
Заработало, спасибо большое!
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.