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

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');
}