Question

我正在尝试加载内容而不使用此代码重新加载整个页面

$(document).ready(function() {
       $('article').load('content/index.php');

 $('a.cta , a').click(function()  {
       var page = $(this).attr('href');

      $('article').load('content/' + page + '.php');
      return false;
   });
});

在大多数情况下，它的工作正常为seen here:

我遇到的唯一问题是，与我的内容区域相关的链接不起作用，但我的内容区域之外的所有其他链接都是。这是为什么？我的代码中缺少什么？

Answer 1

您必须使用委派事件（on()函数）。

$('article').load('content/index.php', function () {
   $("article").on("click", 'a.cta , a', function()  {
      var page = $(this).attr('href');

      $('article').load('content/' + page + '.php');
      return false;
   });   
});

See the documentation了解更多信息。

提供选择器时，事件处理程序称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，但仅适用于与选择器匹配的后代（内部元素）。 jQuery将事件从事件目标起泡到附加处理程序的元素（即最里面到最外层的元素），并为该路径上与选择器匹配的任何元素运行处理程序。

Answer 2

因为您需要使用on委托动态添加的元素。 click事件不适用于动态添加的元素..

试试这个

$(document).on('click','a.cta , a',function()  {
   var page = $(this).attr('href');

  $('article').load('content/' + page + '.php');
  return false;
 });
});

建议将

委托给最近的静态父级以获得更好的性能。

$(article).on('click','a.cta , a',function()  {

link详细了解on委托活动

Answer 3

这是因为a元素中的article个是动态的。 click事件从未绑定到那些事件。相反，使用事件委派：

$('article').on('click', 'a.cta, a', function(e) {
    e.preventDefault(); //better than return false
    var page = $(this).attr('href');

    $('article').load('content/' + page + '.php');
});

Answer 4

我设法让它与它一起工作：

$(document).ready(function() {
   $('article').load('content/index.php', function () {

$(document).on('click','a.cta , a',function()  {
   var page = $(this).attr('href');

  $('article').load('content/' + page + '.php');
  return false;
    });
  });
});

当你几乎不知道自己在做什么时，真的很沮丧。

Answer 5

尝试注释掉return false;行，所有链接都可以使用。

所以...

return false;

改为......

//return false;

jQuery：AJAX加载内容无页面刷新

5 个答案: