clik加载更多数据，然后单击隐藏，然后再次单击加载不起作用

Question

我在这里有些困惑。我有一个包含评论的div。然后，当您单击更多注释图标时，它通过AJAX调用PHP并将结果附加到DIV，然后将其滑动。该部分正常。然后，我有一个隐藏图标，当您单击它时，它会折叠出所示的Div，该div显示了更多评论。问题是，我遇到的是，如果我崩溃了，然后单击显示更多评论，DIV将不再扩展。

下面是处理越多并隐藏点击的代码。任何提示都将不胜感激..谢谢

 $("[id^='show_more_comments_']").on( 'click', function(e) {
       var pagenum     = $(this).data('newpage');
       var photoid     = $(this).data('photoid');
       var commentsdiv = 'morecomments_' + photoid;
       var moredots    = 'show_more_comments_' + photoid;
       var lessdots    = 'hide_more_comments_' + photoid;
       $.ajax({
         type: "POST",
         url: "showmorecomments.php",
         data: {page: pagenum, photoid: photoid},
         success: function(data){
            $("#" + moredots).data('newpage', pagenum + 1);
            $("#" + lessdots).show();
            $(data).hide().appendTo("#" + commentsdiv).slideDown(500);
         }
       });
    });

 $("[id^='hide_more_comments_']").on( 'click', function(e) {
       var photoid     = $(this).data('photoid');
       var commentsdiv = 'morecomments_' + photoid;
       var moredots    = 'show_more_comments_' + photoid;
       var lessdots    = 'hide_more_comments_' + photoid;
       $("#" + commentsdiv).slideUp(500);
       $("#" + lessdots).hide();
       $("#" + moredots).data('newpage', 1);
       $("#" + moredots).data('photoid', photoid);
    });

如果我设置警报以查看数据值，则它们是正确的。它不再扩大评论，我关闭它们并尝试再次打开它们。

谢谢

JT

Answer 1

弄清楚了，slideup隐藏了注释div，因此您必须使用回调函数再次显示注释div。

$("#" + commentsdiv).slideUp(500, function(){
  $(this).empty().show()
})

检查此代码段：

var data = '<div id="content">'
data += 'These are the comments to be added to the comment div'
data += '<ul>'
data += '	<li>Comment 1</li>'
data += '	<li>Comment 2</li>'
data += '	<li>Comment 3</li>'
data += '</ul>'
data += '</div>';
$(function() {
  $("#showBtn").click(function() {
    $(data).hide().appendTo("#morecomments_1").slideDown(500)
  })
  $("#hideBtn").click(function() {
    $("#morecomments_1").slideUp(500, function(){
      $(this).empty().show()
    })
  })
})

<div id="morecomments_1"></div>
<button id="showBtn">Show</button>
<button id="hideBtn">Hide</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>