如何在 Ajax 加载后执行 javascript?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/32552250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 15:27:54  来源:igfitidea点击:

How do I execute a javascript after Ajax load?

javascriptjqueryhtmlcssajax

提问by user3344734

I need to add a class on after an ajax load. I first give a few elements a class "ready" which initiate a css transition. When the link li#menu-item-318 a gets clicked it removes the ready class which then reverses the css transition and then loads a new html document. On the Aja load I once again want to add the ready class to the same elements inserted by the Ajax call.

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

The code below has a callback to add the ready class, which works. But when the Ajax loads its sets the Ready class too early so there is no transition, even though my lines that is supposed to be drawn up is set.

下面的代码有一个回调来添加就绪类,它可以工作。但是当 Ajax 过早地加载它的 Ready 类时,即使我应该绘制的线条已经设置,也没有过渡。

I was thinking Its better I have a script for setting the classes on my transition elements inside the html that gets called by ajax to achieve my desired effect - but that doesn't work. So how do I do?

我在想它更好我有一个脚本来设置 html 中我的过渡元素上的类,它被 ajax 调用以达到我想要的效果 - 但这不起作用。那我该怎么办?

Demo: http://svensson.streetstylizm.com/Click the photography - Polaroid link to se how it reverses the animation, loads the page and then just show the lines.

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

Code:

代码:

$(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> *");
    });
});

回答by Praveen Kumar Purushothaman

You can use ajaxComplete():

您可以使用ajaxComplete()

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

Have this as an example:

以此为例:

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

As said by Popnoodles, this executes when any AJAX call completes. So if you are looking for executing the code in one particular AJAX call, you need to use the successfunction.

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

回答by CodePhobia

The way to do this would be use the ajaxcomplete function in jQuery which is called implicitly after the completion of any ajax call.

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

The examples in this link should get you started

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

.ajaxcomplete() Function

.ajaxcomplete() 函数