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

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;
   });
});

在大多数情况下，它的工作正常，如下所示：

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

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;
   });   
});

有关更多信息，请参阅文档。

当提供选择器时，事件处理程序被称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，而只会调用与选择器匹配的后代（内部元素）。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()  {

链接以阅读有关on委派事件的更多信息

Answer 3

这是因为元素中的那些as是动态的。articleclick 事件从未绑定到那些。相反，使用事件委托：

$('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;