一尘不染

加载Ajax后如何执行javascript?

ajax

我需要在ajax加载后添加一个类。首先,我给一些元素提供一个“就绪”类,该类可以启动CSS过渡。单击链接li#menu-
item-318a时,它将删除ready类,该类将反转CSS转换,然后加载新的html文档。在Aja加载中,我再次想将ready类添加到Ajax调用插入的相同元素中。

下面的代码有一个回调,可以添加ready类,它可以工作。但是,当Ajax加载其集合时,Ready类为时过早,因此即使已设置本应绘制的行,也不会发生过渡。

我以为它更好,我有一个脚本来设置由ajax调用的html内的过渡元素上的类,以实现所需的效果-但这不起作用。那我该怎么办?

演示: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> *");
    });
});

阅读 221

收藏
2020-07-26

共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函数。

2020-07-26