jquery - jQuery Ajax：插入到有时会失败？

Question

我经常使用 jQuery Ajax 来更新 HTML 页面中的 div。ajax 包含在 $(document).read(...) 中，如下所示：

$(document).ready(function() {
  $('a.button').click(function() {
    var url = $(this).attr('href');
    $('#content').load(url);
    return false;
  });
});

但是，单击按钮后，Ajax 有时会失败，它会在整个页面中显示结果，而不是在“内容”div 中。这在页面加载或刷新时经常发生。但我认为 $(document).ready(...) 会阻止这种情况发生。什么地方出了错？

Answer 1

试试这个

 $(document).ready(function () {
     $('a.button').click(function () {
     var url = $(this).attr('href');        

    $.get(url, function(data) {
       $('#content').html(data);    
        });
     });
});

Answer 2

Ajax 有时会失败，它会在整个页面中显示结果

这表明未使用选择器选择超链接a.button。确保要通过 AJAX 加载的超链接具有类名button，如下所示：

<a class="button" href="...">

如果您希望通过 AJAX 加载所有超链接，请移除按钮选择器。

$(document).ready(function() {
  $('a').click(function() {
    ... ...
  });
});

如果某些超链接是在另一个脚本加载页面后动态创建的，请尝试以下操作：

$(document).ready(function() {
  $('body').on('click', 'a', function() {
    ... ...
  });
});