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

Question

我有一个 jQuery 代码，可以通过 AJAX 加载帖子的更多评论。随后将更多评论替换为更少评论预计会隐藏加载的评论，但它不起作用......

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

因为less 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')
});