Question

我正在使用bxslider在这个网址上创建一个啤酒库：crystalspringsbrewing.com/ourbeers.php

点击啤酒的徽标，滑块下方会显示说明。我正在用这段代码做到这一点：

$(document).ready(function() { 
  $('.beer-text:nth-of-type(1)').show();

  $('.beer-type').click(function(event) {
    var beerName = $(this).data('beer');
    $('.beer-text').hide();
    $('#' + beerName).show();
  });
});

我在bxslider中设置了一个无限循环。问题是这样的：如果你从头开始按回一次，然后点击滑块（Wuerzburger）中的最后一个啤酒，则会提供说明，但是其他幻灯片（13，Summertime Ale，Butch）将不会显示他们的描述点击它们。什么都没发生。 Chrome和Safari中大约50％的时间都会出现此错误。经常足以令人讨厌。适用于Firefox，所以我想它是浏览器或bxslider中的一个错误。有任何想法吗？如果在第一次加载页面时没有出现错误，请尝试刷新几次。

Answer 1

基本上发生的事情是，当您到达列表的末尾时，您正在使用的jQuery插件是动态地向页面添加元素。当您使用$（＆＃39; .beer-type＆＃39;）。点击（）时，您正在设置点击啤酒类型＆＃39;元素，但是当你添加一个新的.beer-type元素时，还没有添加处理程序。

解决这个问题的方法是使用jQuery函数.on（），你可以在这里阅读。回到这一天，解决这个问题的方法是使用jQuery函数.live（），但现在该函数已被弃用（不要与折旧混淆），这意味着它现在已被逐步淘汰。 .on（）函数的工作方式略有不同（特别是如果您尝试影响动态添加的元素）。以下是如何更改代码以使其重新运行的方法。替换此块：

$('.beer-type').click(function(event) {
    var beerName = $(this).data('beer');
    $('.beer-text').hide();
    $('#' + beerName).show();
});

使用此块：

$(document).on('click', '.beer-type', function() {
    var beerName = $(this).data('beer');
    $('.beer-text').hide();
    $('#' + beerName).show();
});

希望有所帮助！

Safari / Chrome bxSlider无限循环问题/ bug

1 个答案: