javascript - AJAX 加载后 jQuery Ready 事件不工作

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() 只对它们调用一次。