Question

我构建了一个简单的Web应用程序，它可以从表格中删除HTML，并为每个表格行创建两个div：一个包含项目的名称，下一个包含一堆详细信息。我用Ajax抓取内容，然后构建div。我试图使用slideToggle（）来切换单词名称div时的详细信息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 -->

我对这一切都很陌生，所以这是一条艰难的道路。如果我可以让这个切换工作，我将完成！

提前感谢您的帮助，感谢我在Google搜索中找到的所有答案，这些答案都是我带来的。

Answer 1

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

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

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

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

1 个答案: