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。

如何在ajax调用后修复javascript？

2 个答案: