javascript - ajax调用后如何修复javascript？

Question

这个问题已经有答案了:

jQuery .live() vs .on() method for adding a click event after loading dynamic html (7 个回答)

已关闭 7 年前。

因此我的网页结构分为三个文件。我有一个包含 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 时，一切都工作得很好，但是一旦我开始单击链接，内容 div 中的 javascript 就不再触发。我的 index.html 中的导航栏使用 javascript，并且无论如何仍然可以工作。

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

如何解决这个问题？

Answer 1

您正在点击加载动态内容。 .click() 仅适用于 DOM 中当前的元素，不适用于 future 的元素。为此，您必须使用 $(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'));
});

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