Question

当我使用jQuery选择器在隐藏的div中添加动态生成的html时，它们不起作用。如何使用jquery在隐藏的div中添加内容？我需要在ajax查询后添加内容时隐藏div，因为我应该生成许多html块并在页面上添加它们，我想在隐藏div中添加所有块然后显示所有内容（使div可见）。

Answer 1

使用jQuery .css()方法隐藏您的元素

$('#panel').css('visibility', 'hidden');

并显示回来：

$('#panel').css('visibility', 'visible');

如果您需要在加载新项目之前隐藏元素您可以使用beforeSend函数：

beforeSend: function(){
  $('#panel').css('visibility', 'hidden');
}

然后加载并解析您的数据后，使用success函数再次显示：

success: function(data){
  $('#panel').append('<div>' + parsedData + '</div>').css('visibility', 'visible');
}

和所有在一起：

    $.ajax({
      method: "POST",
      url: "sample.php",
      dataType: "json",
      beforeSend: function(){
          $('#panel').css('visibility', 'hidden');
      },
      success: function(data){
          $('#panel').append('<div>' + parsedData + '</div>').css('visibility', 'visible');
      },
    });

Answer 2

您可以使用jQuery的hide（）和show（）函数来完成此任务，这比Zecur使用的.css（）更清晰。看看我的Plunker example

示例：

<div class="hiddenContent">I am hidden div</div>    
<button class="addDynamicContent">Add dynamic content to div - hide while doing</button>

脚本：

<script>
$('.addDynamicContent').click(function() {
        $.ajax({
          url: "http://api.icndb.com/jokes/random",
          beforeSend: function() {
            $('.hiddenContent').hide();
            console.log('I hide before request');
          },
          success: function(response) {
            $('.hiddenContent').html(response.value.joke);
            $('.hiddenContent').show();
            console.log('I show after I got the content');
          }
        });
      });
</script>

查看Plunker

jQuery在隐藏的div中添加html内容

2 个答案: