如何在 Ajax 加载后执行 javascript？

Posted 2023-05-08

【中文标题】如何在 Ajax 加载后执行 javascript？

【英文标题】：How do I execute a javascript after Ajax load?

【发布时间】：2015-12-09 17:08:03

【问题描述】：

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

下面的代码有一个回调来添加准备好的类，它可以工作。但是当 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> *");
    );
);

【问题讨论】：

您对答案的评论表明您问错了问题...

是的，看起来是这样。我的逻辑在这里失败了。

【参考方案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 函数。

【讨论】：

@user3344734 请记住，每次 ajax 调用完成时都会执行此函数。如果你希望它只在一个实例中发生，你应该使用成功回调。

这行得通，但给出了与 Ajax 回调相同的结果。这太烦人了。我真的不知道为什么它不会在没有准备好的类的情况下加载元素和 css - 它会跳过整个动画。我认为我没有想法。无论如何，这是正确的答案，再次感谢。

【参考方案2】：

这样做的方法是使用 jQuery 中的 ajaxcomplete 函数，该函数在任何 ajax 调用完成后被隐式调用。

此链接中的示例应该可以帮助您入门

.ajaxcomplete() Function