Jquery 加载Ajax之前添加类

在jQuery浏览器中显示Ajax加载的页面之前，我试图将一个类添加到该页面中包含的元素中。这是我的密码：

$("#landing li.nav4 a").live('click', function() {
    $("#landing").fadeOut('slow', function(){
        $('#agency').load('assets/ajax/agency.html').fadeIn(function(){
            $("#agency-main nav li.nav1 a").addClass("nav1-on");
        });
    });
    return false;
});

此时发生的事情是加载页面，然后添加类，在加载类（背景图像）时会出现明显的“闪光”

---

您知道如何加载内容、添加类，然后按顺序添加fadeIn吗？

您可以尝试在后台创建要与类关联的元素，然后在需要时插入它

像

el = $("#landing");
//fadeout el
//remove from html
//add class
//insert it back in

---

如果您可以在JSFIDLE上编写代码，thta将非常有用：）

请叫我nutbar，但我讨厌在您只需要管理事件顺序的情况下破译一百万次回调：

$("#landing li.nav4 a").on('click', function(event) {
  event.preventDefault(); // better than return false;
  $agency = $('#agency'); // cache it since we use it twice

  // fade out the landing div, and when that's done load agency.html into #agency
  // presumably, #agency is already hidden
  $("#landing").fadeOut('slow', function(){
    $agency.load('assets/ajax/agency.html');
  });

  // add the class to the nav item
  $("#agency-main nav li.nav1 a").addClass("nav1-on");

  // fade #agency in
  $agency.fadeIn();
});

请注意，您可以采取或放弃的其他2项建议改进：

将.live（）替换为从jQuery 1.7开始提供的.on（）。如果您使用的是较旧的jQuery，那么仍然应该查看.delegate（）而不是.live（）

使用preventDefault（）阻止click事件冒泡到其默认值；这会更有效，并且在查看代码时更容易理解

---

我是一个jquerynoob，所以这更多是为了我自己的学习-为什么不呢

//make sure #agency is defaulted to display:none, or add a line to check this
$("#landing li.nav4 a").live('click', function() {
  $('#agency').load('assets/ajax/agency.html', function() {
    $("#agency-main nav li.nav1 a").addClass("nav1-on"); 
  });
  $("#landing").fadeOut('slow', function(){
    $('#agency').fadeIn();
   });
  return false;
});

---

不清楚文档何时可以使用

“#agency main nav li.nav1 a”

（顺便说一句，这是一个过度合格的选择器！）来添加其类。这是始终可用的，还是仅在

agency.html

内部可用？仅在agency.htmlSo

内部可用？agency main nav li.nav1 a

仅在加载

agency.html

后可用，但您希望

addClass（'nav1-on'））

在将

agency.html

加载到

#agency

之前，将其加载到它？是。如果这是不可能的话，也许会有一些烟雾和镜子？将fadeIn延迟到足以在浏览器可见之前添加类的时间？您可以使用

$.ajax

。加载HTML，添加类，然后将其插入DOM中。另外：是否有可能这是过度设计的？jQuery不是模块化的（它是专门点击

nav4a

，最终专门修改

nav1a

。这可能是预期的结果，但不可重用！）。既然它是如此具体，为什么不直接返回agency.html和已经添加的类呢？是的，也许你是对的。我试图避免从标签中管理一堆removeClass，但无论如何我都必须这样做。谢谢大家。

“#agency main nav li.nav1 a”

在agency.html中，因此必须先加载agency.html，然后才能将类添加到其中。唯一的缺点是，如果agency.html需要很长时间才能加载，他们可能会纳闷为什么单击后什么也没有发生。无法加载加载.gif…替换掉.live（）（已弃用）并返回false。缓存创建的

$（“#代理”）

对象。然后你会得到。。。几乎与我已经发布的内容相同。；-）不过，我确实更喜欢这篇文章中的事件顺序。我认为是同一件事，格雷格-我们发布了同一件事，尽管顺序略有不同，还有其他两个不同：）哦，你的文章有更多的换行：）