Question

所以我有一个使用此功能添加的菜单：

function loadContent() { 
    $(".navbar").load("navigation.html"); 
}

navigation.html看起来像这样：

<ul>
    <li><a href="home.html" class="first">Home</a></li>
    <li><a href="calendar.html">Calendar</a></li>
    <li><a href="profile.html">Profile</a></li>
    <li><a href="charts.html" class="last">Energy Charts</a></li>
</ul>

但是当我尝试在该菜单中选择一些内容并添加一个类时，让我们说：

$('.navbar a').addClass('activeState');

它在Chrome中不起作用，我认为因为DOM需要刷新或其他东西，我真的不知道......

Answer 1

您必须等待内容实际加载。将您的代码放入load回调函数：

function loadContent() { 
    $(".navbar").load("navigation.html", function () {
        $('.navbar a').addClass('activeState');
    }); 
}

正如@LifeInTheGrey指出的那样，你应该使用一个单独的函数来提高性能：

function loadContent() { 
    $(".navbar").load("navigation.html", actOnContent); 
}

function actOnContent () {
    $('.navbar a').addClass('activeState');
}

您还应该查看选择器缓存...

Answer 2

任何依赖于加载AJAX的内容的代码都必须放在所述AJAX请求的成功处理程序中。在.load()的情况下，这是第三个参数：

$(".navbar").load("navigation.html",null,function() {
    $(".navbar a").addClass("activeState");
});

Answer 3

尝试使用文档就绪功能：

$('.navbar').delegate('a', 'click', function() { 
  $(this).addClass('activeState');
});

Answer 4

试试这个

function loadContent() { 
    $(".navbar").load("navigation.html", addAttribute); 
}

function addAttribute() {
    $('.navbar a').addClass('activeState');
}

如何选择使用Javascript包含的jQuery元素？

4 个答案: