javascript - 在加载的 html 上使用 javascript

Question

我已经简要地查找了任何类似的问题，但没有找到相似的或我理解的问题，所以如果这是重复的，首先我深表歉意。

我的问题是我无法在加载的 (.load) html 上使用 javascript。

我通过以下方式将导航栏调用到 div 中:

$(document).ready(function() {
  $('.nav').load("navbar.html");
});

这非常有效，我对此没有任何问题。例如，当我想向我加载的 html 代码中添加一个类时，就会出现问题。

我目前使用的脚本(保存在一个单独的 .js 文件中并在我的 html 代码末尾调用):

$(document).ready(function() {
  $('#home').removeClass('active');
  $('#profile').addClass("active");
});

这是我打算对加载的 html 代码进行的操作:
这是导航栏的一部分，通过第一个代码片段 ^ 加载。

<li id="profile"><a href="Profile.html">Profile</a></li>

页面加载后:(添加:'class="active")

<li class="active" id="profile"><a href="Profile.html">Profile</a></li>

(这是使用 Bootstrap 导航标签的无序列表的一部分。)

无论如何，当我直接将此代码放入我的 html 页面并通过 javascript 删除导入时，我可以添加类，例如“active”类。此外，我的页面上有一个 slider ，它通过使用 javascript 使用箭头来“滑动”图片，我遇到了完全相同的问题:

导入代码后，我无法通过使用 javascript 进行编辑，但是当代码出现在实际的原始 html 代码中时，我可以。我不明白为什么会这样，因为我对 javascript 及其语法还很陌生。

提前致谢，我很乐意回答任何问题，因为我确信这不是很清楚，因为我不完全确定问题出在哪里。

Answer 1

可能发生的情况是您的代码在实际加载之前尝试对加载的 html 进行操作。尝试把它放在完整的回调中:

$('.nav').load("navbar.html", function() {
  $('#home').removeClass('active');
  $('#profile').addClass("active");
});

这将确保代码在加载完成后运行。