Question

我在 stackoverflow 上发现了相同的问题，但这些答案无法解决我的问题。如果我加载页面然后jquery $('').addClass()无法正常工作

请帮忙

HTML

<div id="header"></div>

Jquery的

$(document).ready(function(){
  $("#header").load("header.php"); 
  $("#footer").load("footer.php");
  $('.home').addClass('active');
});

的header.php

<ul>
    <li> <a href="" class="home">Home</a></li>
    <li> <a href="about.php" class="about">About</a></li>
    <li> <a href="">Project</a></li>
    <li> <a href="">Location</a></li>
    <li> <a href="">Faq's</a></li>
</ul>

Answer 1

问题是因为load()调用是异步请求。因此，当您尝试向其添加类时，.home元素不存在。

您需要使用load()的回调参数在 AJAX请求完成并且DOM已更新之后运行一些代码，如下所示：

$(document).ready(function(){ $("#header").load("header.php", function() { $('.home').addClass('active'); }); $("#footer").load("footer.php"); });

尽管如此，我强烈建议您找一种在页面中包含内容的替代方法。在页面加载速度和服务器压力方面，在服务器端执行它会更有效。

Answer 2

你必须这样做： -

$(document).ready(function(){
  $("#header").load("header.php", function(){
     $('.home').addClass('active');
  }); 
  $("#footer").load("footer.php");
});

Jquery addClass（）无法在加载的页面上工作

2 个答案: