нажмите, чтобы загрузить больше данных, затем нажмите, чтобы скрыть, затем нажмите загрузить снова, не работает

Question

Я немного запутался здесь.У меня есть div, который содержит комментарии.Затем, когда вы нажимаете на значок дополнительных комментариев, он вызывает php через ajax и добавляет результаты в 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>