ajax调用后如何修复javascript？ [复制]

Question

所以我的网页结构分为三个文件。我有一个带有 3 个 div 的 index.html 文件；我的导航栏、内容框和页脚。然后我有另外两个 .html 文件，它们具有不同的内容，我想在单击链接时加载它们。

我的 Javascript 看起来像这样：

$( ".content" ).load( "home.html" );

$( ".parents-link" ).click(function() {
  $( ".content" ).load( "parents.html" );
});

$( ".home-link" ).click(function() {
  $( ".content" ).load( "home.html" );
});

所有文件都使用一些 javascript，当我第一次打开 index.html 时，一切正常，但是一旦我开始点击链接，javascript 就不会再在内容 div 中触发。我在 index.html 中的导航栏使用 javascript 并且仍然可以正常工作。

另外，我所有的自定义 js 都在一个 .js 文件中，用于所有三个 .html 文件。我也在使用一些插件。

我该如何解决这个问题？

Answer 1

您在点击时加载动态内容。 .click() 仅适用于当前在 DOM 中的元素，不适用于未来的元素。为此，您必须使用$(staticElement).on('click', 'dynamicElementSelector')：

$(document).on('click', ".parents-link", function() {
    $(".content" ).load("parents.html");
});

---

我建议使用动态结构：

<a href="parents.html" class="loading-link"></a>

$(document).on('click', '.loading-link', function (event) {
    event.preventDefault(); // Prevent browser from following link.
    $.load($(this).attr('href'));
});

对于必须加载某些内容的所有链接，只有一个功能。

Answer 2

让我们试试这个：

$('html').on('click', '.parents-link', function() {
  $('.content').load('parents.html');
});

$('html').on('click', '.home-link', function() {
  $('.content').load('home.html');
});

正如我在第一条评论中所说，我们需要将事件绑定到上父级并使用event propagation。