Safari/Chrome bxSlider infinite loop issue/bug -

i'm using bxslider create gallery of beers @ url: crystalspringsbrewing.com/ourbeers.php

you click on logo beer , description provided beneath slider. i'm doing code:

$(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();   }); }); 

i have set infinite loop in bxslider. problem this: if press once beginning , click on last beer in slider (wuerzburger) description provided, other slides (13, summertime ale, butch) not display descriptions when click on them. nothing happens. error occurs 50% of time in chrome , safari. enough annoying. works fine on firefox, imagine it's bug in browser or bxslider. ideas? try refreshing few times if bug doesn't occur first time page loads.

basically what's going on when you're getting end of list, jquery plugin you're using adding elements page dynamically. when use $('.beer-type').click() setting handler clicks on 'beer-type' elements, when add new .beer-type element, handler has not yet been added.

the way around use jquery function .on() can read here. in day, way around problem use jquery function .live() function has been deprecated (not confused depreciated) means it's been phased out. .on() function works bit differently (especially if you're trying effect elements added on fly are). here's how can change code make things work again. replace block:

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

with block:

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

hope helps!