JQuery SlideToggle在本地但不在Web服务器上工作

我构建了一个简单的Web应用程序，它将HTML从表格中删除，并为每个表格行创建两个div：一个包含项目名称，另一个包含一些细节。我用Ajax抓取内容，然后构建出div。我试图使用slideToggle（）切换单击名称div时的细节div。一切工作在本地，但是当我部署到服务器时，切换不想工作。JQuery SlideToggle在本地但不在Web服务器上工作

这里是我如何建立的div（工作在本地和服务器上：

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

下面是切换代码：

$(".beer").click(function() 
{ 
    $(this).next(".beerDetails").slideToggle(500); 
});

在脑子里，我有：

<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>

然后身体：

<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 THE BEER DIVS HERE --> 

    </div> <!-- end beerList div --> 
    <div id="footer"> 
     <text id="prefetch" align="center"></text> 
    </div> <!-- end footer div --> 

</div> <!-- end container div -->

我很新的这一切，所以它是一个坎坷之路。如果我能得到这个切换工作，我会完成！

在此先感谢您的帮助，并感谢我通过Google搜索找到的所有答案，这些答案将我带到了这里。

来源

2013-07-18 Kyle Klink

按“F12”打开IE/Chrome中的控制台，或者下载firefox for firefox，是否表示无法找到该资源？这很可能是因为它无法加载jQuery文件。另外，当你处于localhost开发环境时，我总是推荐本地jQuery，当你正在生产时，我会推荐CDN jQuery – Ohgodwhy

一切都已加载。它确实需要大约10秒来加载页面Im的所有数据。 –

看起来您正在使用动态内容。如果是这种情况，您必须使用.on()而不是.click()。

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

事件附加到元素在页面加载时，和动态数据是不是在当时的DOM。因此，使用.on()您将事件侦听器附加到元素的父级。但父母必须硬编码到页面中。然后，当您单击该元素时，会将事件向上拖动，直到找到与之匹配的事件侦听器。

来源

2013-07-18 03:24:18 James

这样做了。谢谢！ –

@KyleKlink这是我的荣幸 – James

@KyleKlink不要忘记标记为正确答案：o） – James

JQuery SlideToggle在本地但不在Web服务器上工作

回答

相关问题