Ajax加载后如何在元素上添加一个额外的类答案

【问题标题】：How to add an extra class on element after Ajax loadAjax加载后如何在元素上添加一个额外的类
【发布时间】：2015-09-13 08:41:34
【问题描述】：

我需要在 ajax 加载后添加一个类。我首先给一些元素一个“准备好”的类，它会启动一个 CSS 转换。当链接 li#menu-item-318 a 被点击时，它会删除准备好的类，然后反转 css 转换，然后加载一个新的 html 文档。

这就是我卡住的地方。在 Ajaxload 上，我需要在 .test 容器中加载的相同元素上的相同类上再次设置就绪类，以再次为新页面 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> *");                          
});
});

【问题讨论】：

标签： javascript jquery html css ajax

【解决方案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');
});

【讨论】：

效果很好！然而，它并没有达到我想象的效果。似乎它在加载 DOm 之前为元素提供了就绪类，因此它从未开始转换。如果没有准备好的类，我的元素有一个 width:0% 和一个准备好的类 width:100% 和一个过渡。但是在 ajax 加载之后，它只看到了具有就绪类的元素。是否可以在加载 DOM 后设置就绪类，以便首先为元素分配就绪类的 CSS？
很高兴它有帮助。由于您的代码当前正在编写，当 DOM 准备好时，会添加 ready 类。这就是将它包装在$(function() { ... }); 中的作用。您当前的问题似乎与您提出的问题没有直接关系，因此除非您自己解决问题，否则我建议您提出一个新问题。
嗯好的。生病会摆弄，再次感谢这让我更接近我想要实现的目标。

【解决方案2】：

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

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

【讨论】：