Question

我需要在ajax加载后添加一个类。我首先给几个元素一个“准备好”的类，它启动一个css转换。单击链接li＃menu-item-318 a后，它将删除ready类，然后反转css转换，然后加载新的html文档。

这就是我陷入困境的地方。在Ajaxload上，我需要在.test容器中加载的相同元素上的相同类上再次设置ready类，以再次为新页面a-swell启动CSS转换。

代码：

$(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

根据jQuery documentation，您可以向load添加一个回调函数，该函数将在加载完成后执行：

$(".js-pageTransition").load("photo.html .test> *", function() {
    //This will run once the new content is loaded.
    $('.v-line, .h-line, .nav, #ban_image img').addClass('ready');
});

Answer 2

您可以将回调函数传递给jQuery的load()方法。

$(".js-pageTransition").load("photo.html .test> *", function(){ 
    //this will execute after ajax load 
});

如何在Ajax加载后在元素上添加额外的类

2 个答案: