javascript - 如何使用 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');
}