Question

当内容插入到html页面时，我想隐藏通过ajax加载的部分内容。那些live，bind和delegate仅用于事件，我可以在这里使用什么？谢谢你的帮助。

更新：最初，当页面加载时，相同的部分已被隐藏。

最初，我有这样的事情：

<a id="link" href="">a link</a>
   <ul class="list">
         <li>...</li>
         <li>...</li>
   </ul>

和jquery：

$('.list').hide();
$('#link').moserover(function(){
      $('.list').show();
})

现在，这部分将被替换为从ajax收到的其他内容，这是相同的，

 <a id="link" href="">another link</a>
   <ul class="list">
         <li>****</li>
         <li>****</li>
   </ul>

但是当这个内容被插入页面时，列表没有被隐藏，我的问题是我怎么能在它来自ajax时隐藏这个列表。希望这很清楚。

Answer 1

如果您希望在首次加载时隐藏它，请在样式表中使用CSS或在标记中添加内联样式。这将使其隐藏的默认条件。如果，有一些原因你不能这样做，那么在通过ajax加载之后，你可以用jQuery隐藏它。

如果您的问题比此更多，请详细说明或解释您想要的内容。

假设您要添加的内容是：

<div id="myAjaxContent">My content here</div>

然后，您可以像这样在样式表中使用CSS，并且元素将自动隐藏而无需您执行任何其他操作（不需要jQuery）：

#myAjaxContent {display: none;}

或者您可以在内容上使用内联样式：

<div id="myAjaxContent" style="display: none;">My content here</div>

或者，如果你想用代码显示/隐藏它，你可以在ajax调用完成后立即使用它（这是你的代码通过ajax加载它，这样你可以在加载后运行你想要的任何代码）： / p>

$("#myAjaxContent").hide();

.live()仅适用于点击等活动。您无法使用.live()在任何新元素上自动调用hide()。您可以使用预定义的CSS（在样式表中或在对象的内联中）来执行此操作。

如果您希望以后轻松切换可见性，请在对象上放置一个特定的类：

<div id="myAjaxContent" class="notVisible" style="display: none;">My content here</div>

并有一个预定义的CSS样式表规则，如下所示：

.notVisible {display: none;}

稍后，如果您想以编程方式显示该对象，您可以这样做：

$("#myAjaxContent").removeClass("notVisible");

这将显示出来。

Answer 2

如果您使用jquery load，则可以执行回调功能

这里的小例子

$('#result').load('server.php', function() {

$(".list").hide();  

});

编辑

如果您不想一次又一次地编写代码那么好。

所以你可以声明函数并在你想要的地方调用它！像

function foo(){

// your code
}

//call it on document load
foo();

 $('#result').load('server.php', function() {    
    foo();    
    });

但在你的情况下它只是单行代码。如果你仍然想简化它，那很简单

var myele =  $(".list");

myele.hide();
myele.show();

希望它有所帮助

Answer 3

你可以试着让AJAX返回一串要插入的html代码。确保您要隐藏的每个项目都有ID或类。然后通过几个简单的.apppend()或.html()调用，您可以将所有代码添加到您的页面。

从那里开始就像使用$('#YourID').css('display', 'none');

一样简单

Answer 4

显示：隐藏..通过css ..

$（ “elementid。 ”）的CSS（“ 显示”， “隐藏”）;

Answer 5

我的投票是重新考虑您当前的方法。

您正在进行AJAX调用并返回整个HTML块，这在结构上与您加载时在页面中已有的相似。这似乎有点低效，并且会产生更多的开销（正如您所看到的那样）。

尝试在JSON / XML中返回li或a值，然后使用.text()替换HTML中的值。这在某些方面会有所帮助;你减少了答案的大小并完成了你需要的东西。

Answer 6

作为解决方案之一：

$("#myAjaxContent").fadeOut(1);