Question

我有一个jQuery代码，通过AJAX加载帖子的More comments。 More comments后来被Less comments替换预计会隐藏加载的评论，但它不起作用......

这是HTML代码：

<div class = 'feeds'>
  <div class = 'comments'>
    <div class = 'comment_data>
      <div class = 'per_comment'>
        <p> slideToggle!</p>
      </div>
      <div class = 'per_comment'>
        <p> classToggle!</p>
      </div>
    <button class='morecomments' value='7' name = 'more' type='submit'>
     More comments</button>
  </div>
 </div>
</div>

加载更多评论的jQuery代码，它运行得很好：

$(".morecomments").click(function () {
  var $this = $(this);
  var post_id = $(this).val();
  var request = $.ajax({
  url: "comments.php",
  type: "POST",
  data: { post : post_id },
  dataType: "html"
  });
request.done(function( msg ) {
   $this.prev('.per_comment').html( msg ); 
   $this.replaceWith("<button class='lesscomments value='7' name = 'less'   type='submit'>Less comments</button>"); 
});
});

jQuery代码，我希望隐藏加载的评论，但它不起作用：

$( ".lesscomments" ).click(function() {
var $this=$(this);
$(".murconform").submit(function(e){
        return false;
    });
    $this.prev('.comment_data').slideToggle('fast')
});

预期的谢谢。

Answer 1

因为动态创建了较少的comments元素，所以需要使用event delegation

//this should not be within the less handler.... need to handle the logic in some other way
$(".murconform").submit(function (e) {
    return false;
});
$('.comment_data').on('click', ".lesscomments", function () {
    var $this = $(this);
    $this.closest('.comment_data').slideToggle('fast')
});

Answer 2

这是因为加载时页面中不存在lesscomments元素。
你应该使用document.ready进行eetuar动作。
尝试使用以下功能：http://api.jquery.com/on/

如何在jQuery中隐藏加载的注释

2 个答案: