Safari /鉻bxSlider無限循環的問題/錯誤

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插件會動態地向頁面添加元素。當您使用$（'。beer-type'）。click（）時，您正在爲「啤酒類型」元素設置點擊處理程序，但是當您添加新的.beer類型元素時，該處理程序尚未添加。

解決這個問題的方法是使用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(); 
}); 

希望幫助！