如何在Ajax加载后执行javascript？ [英] How do I execute a javascript after Ajax load?

问题描述

我需要在ajax加载后添加一个类。我首先给几个元素一个准备好的类，它启动一个css转换。单击链接li＃menu-item-318 a后，它将删除ready类，然后反转css转换，然后加载新的html文档。在Aja上我再次想要将ready类添加到Ajax调用插入的相同元素中。

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.

下面的代码有一个回调来添加ready类，哪个有效。但是当Ajax加载其设置时，Ready类太早，所以没有转换，即使我设置了应该绘制的线。

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.

我在想它更好我有一个脚本用于在html中设置我的过渡元素上的类，它被ajax调用以达到我想要的效果 - 但那并不是'工作。那我该怎么办？

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?

演示： http://svensson.streetstylizm.com/ 点击摄影 - 宝丽来链接，了解它如何反转动画，加载页面然后只显示线条。

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.

代码：

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

推荐答案

你可以使用 ajaxComplete（） ：

You can use ajaxComplete():

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

以此为例：

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

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

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 success function.

这篇关于如何在Ajax加载后执行javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！