Question

我有一个评论系统，我想实现“显示回复（2）”下滑效果。

这是我的设置示例。

<div class="comment">

 <div class="main-comment">
    Message.

 <a href="#" class="show-replies">Show Replies (1)</a>
 </div>

 <div class="sub-comment">
  Funny comment up there, mate.
 </div>
</div>

但是因为主要注释及其子注释都是使用ajax动态生成的，所以设置事件处理程序有点棘手。我就这样做了：

$(".comment").delegate('.show-replies', 'click', function(event) {

 $(this).parent().next(".sub-comment").slideDown();

});

我试图让设置变得简单，尽可能接近真实的东西。

我做错了什么，如何解决？

Answer 1

 <div class="comment">

 <div class="main-comment">
    Message.

 <a href="#" class="show-replies">Show Replies (1)</a>
 </div>

 <div class="sub-comment" style="display: none">
  Funny comment up there, mate.
 </div>
</div>

 <script>
  $(document).ready(function() {
    $('.show-replies').on('click', function() {
     $('.sub-comment').slideToggle();
    });
  });
 </script>

Answer 2

为了绑定到新的动态内容，你需要告诉jquery它将在哪里。还要确保使用最新的jQuery，delegate已经过时了。

<div class="comments">

   <div class="main-comment">
    Message.<a href="#" class="show-replies">Show Replies (1)</a>
   </div>

   <div class="sub-comment" style="display: none">
    Funny comment up there, mate.
   </div>
</div>

 <script>
  $(document).ready(function() {
    $('.show-replies').on('click','.comments', function() {
     $('.sub-comment').slideToggle();
    });
  });
 </script>

注意.on(eventType, selector, function)签名。

这适用于动态内容，任何内容加载到div类＆＃39;评论＆＃39; - jQuery将始终从新鲜中删除该容器，而不是缓存它。

另外 - 不要只在整个页面上进行，因为它会导致响应缓慢，因为每次点击它都会尝试绑定到选择器。

Answer 3

更换

$(this).parent().next(".sub-comment").slideDown();

与

$(this).parent().parent().next(".sub-comment").slideDown();

解决了问题。

如何使用jQuery下载动态内容？

3 个答案: