javascript - JQuery SlideToggle works locally but not on web server -

i built simple web app scrapes html off table , creates 2 divs each table row: 1 contains name of item, next contains bunch of details. grab content ajax, build out divs. im trying use slidetoggle() toggle details div when name div clicked on. works locally, when deploy sever toggle doesn't want work.

here's how i'm building divs (which works both locally , on server:

                var beerdiv = '<div class="beer"> \                                 <text class="beername">' + values[4] + '</text> \                                </div>';                 var beerdetailsdiv = '<div class="beerdetails"> \                                         <div class="smalldetailblockone"> \                                             <text class="detaillabel">price:&nbsp;</text> \                                             <text class="value">' + values[0] + '</text><br /> \                                             <text class="detaillabel">size:&nbsp;</text> \                                             <text class="value">' + values[1] + '</text> \                                         </div> \                                         <div class="smalldetailblocktwo"> \                                             <text class="detaillabel">abv:&nbsp;</text> \                                             <text class="value">' + values[6] + '</text><br /> \                                             <text class="detaillabel">value:&nbsp;</text> \                                             <text class="value">' + values[3] + '</text> \                                         </div> \                                         <div class="rating"> \                                         <text class="ratingtext">' + values[2] + '</text> \                                         </div> \                                         <div class="restofdetails"> \                                             <text class="detaillabel">style:&nbsp;</text> \                                             <text class="value">' + values[5] + '</text><br /> \                                             <text class="detaillabel">origin:&nbsp;</text> \                                             <text class="value">' + values[7] + '</text><br /> \                                             <text class="detaillabel">description:&nbsp;</text> \                                             <text class="description">' + values[8] + '</text> \                                         </div> \                                     </div>';                 $("#beerlist").append(beerdiv);                 $("#beerlist").append(beerdetailsdiv);                 $(".beerdetails").hide();    

here's code toggle:

$(".beer").click(function() {     $(this).next(".beerdetails").slidetoggle(500);   }); 

in head have:

<link rel="apple-touch-startup-image" href="beersstartup.png" /> <meta name=”viewport” content =”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″ /> <meta name="apple-mobile-web-app-capable" content="yes" /> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png"/> <link rel="stylesheet" type="text/css" href="ontapcss.css"> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript" src="ontapjs.js"></script> 

and body:

    <div id="header">         <h1 align="center">tap & mallet</h1>     </div>   <!-- end header div -->     <div id="title">         <div id="date">             <br>             <text id="datemonth">jun</text><br>             <text id="dateday">22</text>         </div>   <!-- end date div -->         <div id="titleimage">             <img src="croppedbanner.png" />         </div>   <!-- end titleimage div -->     </div>   <!-- end title div -->     <div id="beerlist">          <!-- javascript enters beer divs here -->      </div>   <!-- end beerlist div -->     <div id="footer">         <text id="prefetch" align="center"></text>     </div>   <!-- end footer div -->  </div>  <!-- end container div -->   

i'm pretty new of this, it's been rough road. if can toggle work i'll done!

thanks in advance help, , answers i've found along way through google searches brought me here.

it looks using dynamic content. if case have use .on() instead of .click().

$("#beerlist").on('click','div.beer',function() {     $(this).next(".beerdetails").slidetoggle(500);   }); 

events attached elements when page loads, , dynamic data not in dom @ time. .on() attaching event listener parent of element. parent has hard coded page. when click element, bubbles event chain until finds event listener matches.