0

我构建了一个简单的 Web 应用程序，它从表格中抓取 HTML 并为每个表格行创建两个 div：一个包含项目的名称，下一个包含一堆细节。我使用 Ajax 抓取内容，然后构建 div。当单击名称 div 时，我尝试使用 slideToggle() 来切换详细信息 div。一切都在本地工作，但是当我部署到服务器时，切换不想工作。

这是我构建 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 -->

我对这一切都很陌生，所以这是一条艰难的道路。如果我能让这个开关工作，我就完成了！

提前感谢您的帮助，并感谢我通过谷歌搜索找到的所有答案，这些答案把我带到了这里。

4

1 回答 1

1

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

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

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

于 2013-07-18T03:24:18.217 回答