jQuery Ready Событие не работает после загрузки AJAX

Question

Извините, мне ...

Найденный ответ там и до сих пор не работает.

Так что мои скрипты:

$(document).ready(function() { 
$('.gifs').gifplayer(); 
}); 

и динамический контент загружается AJAX:

<img class="gifs post img-responsive img-bordered" width="100%" src="<?php echo $post->thumb_url;?>" data-gif="<?php echo $post->url;?>" /> 

изображение с "гифы" класса должны назвать функцию "gifplayer". Но каждый раз, когда ajax загружен, он не работает. Что я должен сделать, чтобы получить наилучшую реализацию для этого?

Это все и спасибо ...

Answer 1

К тому времени, динамическое содержимое добавляется в DOM с помощью AJAX, код в готовности события уже выполнены.

Вы должны вызывать $ ('. Gifs'). Gifplayer() только после успешного завершения вызова AJAX. В jQuery это будет через обработчики событий .done или .success.

Вот пример JQuery:

$(function() { 
    getData(); 
}); 

function getData() { 
    $.get("test.php") 
    .done(function(data) { 
     $('.gifs').gifplayer(); 
    }); 
} 

Если вы выполняете несколько AJAX звонки или иметь не АЯКС-нагруженные .gifs элементы, вы будете иметь, чтобы получить немного более элегантной, чтобы убедиться, что gifplayer () вызывается только один раз.

Answer 2

Этот код:

$('.gifs').gifplayer(); 

будет выполнять только gifplayer() на элементах, найденных с помощью JQuery в то время. Строка кода выполняется только один раз, когда страница готова и никогда больше. jQuery не имеет способа идентифицировать элементы, которые еще не существуют.

Когда вы добавляете на страницу дополнительные элементы, вам нужно снова выполнить этот код. Если вы не должны повторять выполнение для одних и тех же элементов, вам нужно изменить свой селектор jQuery, чтобы идентифицировать только новые.