在ajax请求后切换div显示无效 - Javascript / Ajax

时间:2014-10-21 09:09:05

标签: javascript jquery html ajax pagination

我有一个jquery切换来显示/隐藏div上的注释部分。但是我有评论部分分页,由于某种原因,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 OUTPUT

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

如果我删除了分页,请在页面上显示所有帖子,以便它可以正常工作

谢谢,

DIM3NSION

1 个答案:

答案 0 :(得分:0)

我看到一个错误,不确定这是你的分页问题,​​但可能是,你说

  $('.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()函数将选择紧随其后的兄弟,如果添加了选择器,只有匹配选择器时才会匹配它。问题是.comments-box不是跟随兄弟姐妹的,因为它之间有这个DIV节点