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

Posted 2023-02-21

【中文标题】ajax调用后如何修复javascript？ [复制]

【英文标题】：how to fix javascript after ajax call? [duplicate]

【发布时间】：2015-12-02 14:26:09

【问题描述】：

所以我的网页结构分为三个文件。我有一个带有 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 文件。我也在使用一些插件。

我该如何解决这个问题？

【问题讨论】：

“但是一旦我开始点击链接，javascript 就不再触发了” 哪些链接？哪个JavaScript？你发布了什么？

我在导航中创建的链接在点击时添加了新的 html

我猜你对附加到 DOM 但没有附加事件的新元素有问题。您应该尝试在父容器上使用事件委托并在其上绑定 click 事件。

你确定它不起作用？？？也许您的内容已填充，但不是插入，而是附加，所以基本上当您单击所有链接时，您最终会插入 3 个页面，但它们只是在下面

您将希望使用委托事件处理。还有很多其他答案描述了如何做到这一点：Does jQuery.on() work for elements that are added after the event handler is created? 和 jQuery .live() vs .on() method for adding a click event after loading dynamic html

【参考方案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'));
);

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

【参考方案2】：

让我们试试这个：

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

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

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

【讨论】：

当我把它直接放在我的页面上时这不起作用，但我正在尝试阅读这个，因为我仍然不理解这个概念