在 ajax 请求后切换 div 显示不起作用 - Javascript / Ajax答案

【问题标题】：Toggle div show not working after ajax request - Javascript / Ajax在 ajax 请求后切换 div 显示不起作用 - Javascript / Ajax
【发布时间】：2014-12-16 10:55:46
【问题描述】：

我有一个 jquery 切换来显示/隐藏 div 上的 cmets 部分。但是我有 cmets 部分分页，由于某种原因，ajax 请求正在停止显示/隐藏工作。有什么想法吗？

jQuery 代码

    $('.show-all-comments').click(function() {
        $(this).parent().next('.comments-box').slideToggle("fast"); //slide following class called .comments-box
    });

    jQuery(function($) {  //function for pagination.
        $('.post-list').on('click', '#pagination a', function(e){
            e.preventDefault();
            var link = $(this).attr('href');
            console.log(link);
            $('.post-list').fadeOut(200, function(){
                $(this).load(link + ' .post-list', function() {
                    var link = $(this).attr('href');
                    $(this).fadeIn(100);
                });
            });
        })

HTML 输出

<div class="large-5 medium-5 small-12 columns">
          <a class="show-all-comments btn-third-priority">See Comments</a>
        </div>
<div class="large-7 medium-7 small-12 columns">
          <p style="padding-top: 10px; margin-bottom: 4px; font-size:0.9em;">One Response to "Post"
</div>

<div class="comments-box">Content</div>

如果我删除分页，显示页面上的所有帖子，这将允许它工作

谢谢，

维度

【问题讨论】：

标签： javascript jquery html ajax pagination

【解决方案1】：

我看到一个错误，不确定这是否是您的分页问题，但可能是，您说

  $('.show-all-comments').click(function() {
            $(this).parent().next('.comments-box').slideToggle("fast"); //slide following class called .comments-box
        });

但这不适用于您显示的 HTML 输出。要使其正常工作，您应该更改为

  $('.show-all-comments').click(function() {
            $(this).parent().siblings('.comments-box').slideToggle("fast"); //slide following class called .comments-box
        });

next() 函数将选择紧随其后的兄弟，如果添加了选择器，则只有与选择器匹配时才会匹配。问题是 .cmets-box 不是紧随其后的兄弟，因为中间有这个 DIV 节点

【讨论】：