在锚点单击时附加页面内容答案

【问题标题】：Append content of a page on anchor click在锚点单击时附加页面内容
【发布时间】：2013-07-05 19:51:15
【问题描述】：

我正在尝试编写一个简单的 jquery 函数，它将 html 文件的内容插入到当前页面的特定点，并在单击链接时激活 bootstrap 的 smoothscroll.js 以向下滚动到它。

这是我的开始：

脚本：

    <script type="text/javascript">
$('a').filter('[data-fetch]').click(function(e){
  var clicked = $(e.target).closest('a')
  ,   fetch = clicked.attr('data-fetch')
  ;

  $.ajax({
    url: fetch,
    success: function(data){

      $('body').append(data);
      smoothScroller(clicked.attr('href'));

    });
  });
});
    </script>

HTML：

<a href="#about" data-fetch="index-alt.html">Link</a>

#about 锚点位于 index-alt.html 页面中。这是正确的吗？

【问题讨论】：

标签： jquery html twitter-bootstrap smooth-scrolling

【解决方案1】：

我认为您正在尝试获取 clicked 元素的属性，因此请尝试以下操作：

$('a').filter('[data-fetch]').click(function(e){
    var fetch = $(this).data('fetch'); //this here refers to the clicked element.

您也可以摆脱过滤器并执行以下操作：

$('a[data-fetch]').click(function(e){
     var fetch = $(this).data('fetch');

【讨论】：

我了解 jsfiddle 不允许使用 ajax；有没有可以推荐的平台，我可以在哪里尝试和演示这个答案？
@RobM 您可以将其添加到您的代码中，它应该可以工作。

【解决方案2】：

只需使用.load()

$('a').filter('[data-fetch]').click(function (e) {
    var url = $(this).data("fetch"); //use .data to retrieve custom data
    $("body").load(url, function() {
        console.log("data loaded");
    });
});

【讨论】：

猜他不能使用 load，因为这会用新的 html 替换 body 的全部内容。似乎他正在尝试使用 ajax 附加新数据。