为什么浏览器上的后退按钮会破坏此代码?它的作用与此相反

Why is the back button on the browser breaking this code? It works otherwise

本文关键字：代码 作用 与此相反 浏览器 为什么 按钮      更新时间：2023-09-26

此代码确保在公文包图像页面上单击图像以转到相应的库时，单击的图像显示为第一个图像。它通过比较src属性中的字符并使用.prependTo来实现这一点。当我使用页面上的链接在公文包和图库页面之间来回导航时，一切都很好，但当我使用浏览器上的后退按钮时，一切变得不稳定，有时会反复进行准备。这与点击事件一次又一次地触发有关吗？我不确定。。。

$(document).on('click',"a.project",function(){
  $("a.project").on('click', function(event) {
    var portfolioLastTwoChars = $(event.target).attr('data-src').slice(-8, -4);
    var galleryLastTwoChars = $("img").first().attr('data-src').slice(-8, -4);
  if (portfolioLastTwoChars === galleryLastTwoChars) {
   return;
  } else {
   var prePendedImage = $("div").children('img[alt*=' + portfolioLastTwoChars + ']').not(".loaded");
   $(prePendedImage).not(':first').remove();
   prePendedImage.prependTo("div.image-list");
   $('div.image-list > img:not(:first-child)').remove();
}
});
});
$( document ).ready(function() {
 $("a.project").eq(0).trigger('click');
});

我相信这可能是由于您正在添加的类。。。因此，我在点击时删除了这些，然后利用jQuery链接的优势简化了代码。

$(document).ready(function() {
  $("a.project").on('click', function(event) {
    // remove old classes
    $('.moveMe').removeClass('moveMe');
    $('firstGalleryImage').removeClass('firstGalleryImage');
    // get the characters of the clicked element
    var portfolioLastTwoChars = $(event.target).attr('data-src').slice(-8, -4);
    var galleryLastTwoChars = $("img").first().addClass("firstGalleryImage").attr('data-src').slice(-8, -4);
    if (portfolioLastTwoChars === galleryLastTwoChars) {
      return;
    } else {
      $('img[alt*=' + portfolioLastTwoChars + ']').addClass("moveMe");
      $("div").children('.moveMe').not(".loaded").prependTo("div.image-list");
    }
  });
});

现在，对于准备好的文档中的奇数function getImageName()，不确定您到底在尝试什么；如果你试图重新执行$("a.project").on('click',的事件处理程序，这实际上可能是你的问题。如果你只是想执行点击处理程序，那是一回事，如果不是，并且你想把它附加到一些新元素上，那么你可能需要以不同的方式附加它，比如：

$(document).on('click',"a.project",function(){...

将$(document)放在a.project元素的一些包装器上以提高效率。

然后你可以用从某个地方触发它

$("a.project").trigger('click');

注意，触发器可能需要在其他元素（图像？）上激活，如：（如果没有任何标记，很难猜测）

$("a.project").find('img').eq(0).trigger('click');

单击后退按钮时是否发生跨浏览器加载事件？

后退按钮因扰乱javascript脚本而臭名昭著。有几个链接可能指出缓存是一个问题。

这可能不是一个恰当的答案，但我没有足够的观点来评论SO。

您有$（"a.project"）.click事件之前HTML默认值的示例吗？

相关文章：