javascript - 我如何在 Ajax 加载后执行 javascript？

Question

我需要在 ajax 加载后添加一个类。我首先给一些元素一个类“准备好”，它启动一个 css 转换。当链接 li#menu-item-318 a 被点击时，它会删除准备好的类，然后反转 css 转换，然后加载一个新的 html 文档。在 Aja 加载时，我再次想将就绪类添加到 Ajax 调用插入的相同元素。

下面的代码有一个回调来添加 ready 类，这是有效的。但是当 Ajax 过早地加载它的 Ready 类集时，所以没有过渡，即使我应该绘制的行已经设置好了。

我在想我最好有一个脚本来设置 html 中我的过渡元素上的类，该脚本由 ajax 调用以实现我想要的效果 - 但那不起作用。那我该怎么办？

演示:http://svensson.streetstylizm.com/单击摄影 - 宝丽来链接以查看它如何反转动画、加载页面然后仅显示线条。

代码:

$(function () {
    $('.v-line, .h-line, .nav, #ban_image img').addClass('ready');
});

$('li#menu-item-318 a').click(function (e) {
    e.preventDefault();
    var linkNode = this;
    $('.v-line, .h-line, #ban_image img')
        .removeClass('ready')
        .one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',

    function (e) {
        $(".js-pageTransition").load("photo.html .test> *");
    });
});

Answer 1

您可以使用 ajaxComplete() :

$.ajaxComplete(function () {
  // Something to execute after AJAX.
});

以此为例:

$( document ).ajaxComplete(function( event,request, settings ) {
  $( "#msg" ).append( "<li>Request Complete.</li>" );
});

如 Popnoodles 所说, 这会在任何 AJAX 调用完成时执行。因此，如果您要在一个特定的 AJAX 调用中执行代码，则需要使用 success 函数。