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;?>" />

具有“ gifs”类的图像应称为“ gifplayer”功能。 但是每次加载ajax时，它都不会起作用。 我应该怎么做才能做到最好呢？

仅此而已，谢谢...

Answer 1

到AJAX将动态内容添加到DOM时，已经执行了Ready事件中的代码。

仅在AJAX调用成功完成后，才应调用$（'。gifs'）。gifplayer（）。 在jQuery中，可以通过.done或.success事件处理程序进行。

这是一个jQuery示例：

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

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

如果要进行多个AJAX调用或具有未加载ajax的.gifs元素，则必须更加优雅一点，以确保gifplayer（）仅被调用一次。

Answer 2

这段代码：

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

只会在jQuery 当时发现的元素上执行gifplayer() 。 该代码行仅在页面准备就绪时执行一次，而不再执行。 jQuery无法识别尚不存在的元素。

当您向页面添加更多元素时，您需要再次执行该代码。 如果您不应该为相同的元素重新执行，那么您将需要修改jQuery选择器以仅标识新元素。