Question

我使用ajax在div容器中加载html页面。 html内容加载在元素点击上，如下所示：

$(".link").click(function () {
    $('.link').removeClass('current');
    $(this).addClass('current');
    ajaxify($(this).attr('href'));
    window.location.hash = $(this).attr("href");
    return false;
});

如果互联网浏览器中的网址哈希与$(".link").attr("href")相同，我想避免重新加载内容。所以，当我再次点击相同的元素时，我希望没有任何事情发生。

目前，如果我再次点击同一个元素，则会使用ajax调用加载相同的内容。

卢瓦克

Answer 1

将选择器从$(".link")更改为$(".link:not(.current)")，因此只会在没有类current的链接上调用您的点击处理程序。

更新：这不起作用，因为jQuery将click函数分配给document.ready上的所有链接（或者执行此代码的任何地方），并且不会在点击时检查选择器。因此，您需要在点击处理程序中检查类current，如下所示：

$(".link").click(function () {
  if($(this).hasClass('current')) return false;
  ...
});

Answer 2

您可以简单地使用window.location对象（如果location是当前范围，则只需window），并将其与链接的href属性进行比较。

$(".link").click(function () {
    if ($(this).attr('href') != location.href) {
      $('.link').removeClass('current');
      $(this).addClass('current');
      ajaxify($(this).attr('href'));
      window.location.hash = $(this).attr("href");
      return false;
    }
});

如果您的链接是相对路径，则可以使用location.pathname代替location.href

Answer 3

您可以使用以下事实：将“current”类添加到所选链接以有条件地执行处理程序中的代码，如下所示：

$('.link').click(function () {
    var link = $(this);
    if (!link.hasClass('current')) {
        $('.link').removeClass('current');
        link.addClass('current');
        ajaxify(link.attr('href'));
        window.location.hash = link.attr("href");
    }
    return false;
});

避免重新加载ajax内容

3 个答案: