jQuery .load div inside toggle

Question

我有一个带有 css 显示 none 的 div，单击按钮显示 .toggle 功能。

div 包含博客评论。当我发送一条新评论时，我用 .load 函数刷新 div，但它会切换 div，所以我必须再次单击按钮才能显示它。

有什么办法可以避免这种情况吗？

CSS:

.comments-container {
    width: 100%;
    display: none;
}

HTML:

<div class="row" id="criticas-wrapper">
    <h4 class="media-title" id="toggle_criticas" onclick="ver_criticas()">&#x25BC CRÍTICAS</h4>
    <button type="button" class="reply">Nuevo comentario</button>
    <div class="comments-container">
     // Here are all the comments
    </div>
</div>

JS:

<script>
    function ver_criticas() {
        $(".comments-container").toggle("slow");

  }
</script>

<script>

  jQuery(document).on('submit', '.comment_form', function(e){  
  event.preventDefault();

$.ajax({

type: "POST",
url: $(this).attr("action"),
data: $(this).serialize(),

success:function(data){
 var json = JSON.parse(data);

      $(".errormensaje,.correctomensaje").html("").css({"display":"none"});


$("#comment").val("");
    $('#parent_comment').val("");


if(json.resultado =="correcto"){

    if(json.mensaje){
var notification = alertify.notify('¡Mensaje publicado!', 'success', 3, function(){  console.log('dismissed'); });
 $('#criticas-wrapper').load('<?php echo base_url(uri_string());?> #criticas-wrapper');


    }

}
if(json.resultado =="error"){

    if(json.mensaje){
      //$(".errormensaje").append(json.mensaje).css({"display":"block"});
      var notification = alertify.notify(json.mensaje, 'error', 3, function(){  console.log('dismissed'); });

    }

}
else
{
console.log(data);
}
},
error:function(xhr,exception)
{

}
})
e.preventDefault();


  });

</script>

Answer 1

最简单的方法是在重新加载 div 后添加一个 show()。

...load(url, function(){
   ...show();
})

加载完成后立即显示它。

jQuery .load div inside toggle

jQuery .load div inside toggle

html

jquery

load

toggle