如何在Jquery中隐藏已使用.load函数加载的元素

时间:2012-04-09 20:16:25

标签: javascript jquery ajax callback jquery-load

我有一些使用JQuery Load Function更新的类。当Page First Loads I我们将它们作为目标并隐藏它们时:

$('.classname').hide();

我像这样做ajax load

$.ajax({  
  type: "GET",  
  url: "index.php",  
  data: dataString,  
  success: function() {  
      $('.wrapperClass').load('index.php .wrapperClass');
      $('.classname').hide();
  },
      error: function() {

      }  
});

为了简单起见,html是这样的:

<div class="wrapperClass">
    <span class="classname">Content 1</span>
    <span class="classname">Content 2</span>
</div>

问题是,wrapperClass内部的所有内容都重新加载,但内部的跨度不会被隐藏,它们会重新出现,我无法弄清楚如何隐藏它们之后通过Ajax重新加载。

2 个答案:

答案 0 :(得分:5)

正如您可能(\应该)知道的那样,load是一个ajax请求,因此当您尝试隐藏它们时,不会加载这些元素。

将处理已加载内容的代码移至完整回调:

success: function() {  
      $('.wrapperClass').load('index.php .wrapperClass', function(){
              $('.classname').hide();              
          });
      }

完整代码:

$.ajax({
    type: "GET",
    url: "index.php",
    data: dataString,
    success: function() {
        $('.wrapperClass').load('index.php .wrapperClass', function() {
            $('.classname').hide();
        });
    },
    error: function() {

    }
});​

load docs

.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)])

  • url包含请求发送到的URL的字符串。
  • data随请求一起发送到服务器的地图或字符串。
  • complete(responseText, textStatus, XMLHttpRequest) 请求完成时执行的回调函数。

答案 1 :(得分:1)

您需要将$('.classname').hide();添加到.load()的回调函数中。现在,它试图在元素存在于页面之前隐藏它们。试试这个:

$.ajax({  
  type: "GET",  
  url: "index.php",  
  data: dataString,  
  success: function() {  
      $('.wrapperClass').load('index.php .wrapperClass', function() {$('.classname').hide();});
  },
      error: function() {

      }  
});