如何隐藏在jquery中动态创建的元素?

时间:2010-09-16 08:24:27

标签: jquery

我试图隐藏一些我使用.hide()函数动态创建的div,但没有运气。我认为它不起作用的原因是因为尚未添加到DOM的元素。有办法吗?

$('<div class="toggle_container"></div>').html('<div
       class="block"><p>'+title+'</p></div>').appendTo('#page-wrap'); //dynamic creation of divs

$(".toggle_container").hide(); //trying to hide,but not working

由于

4 个答案:

答案 0 :(得分:1)

执行此操作时,page-wrap是否已在DOM中?因为如果是这样,它似乎有效:http://jsbin.com/ukite3我在Linux上使用Chrome和Firefox,在Windows上使用IE8和IE6。该示例使用上面的代码,然后在两秒后显示div(以证明添加有效)。工作良好。如果我注释掉隐藏的部分,我会立即看到新的内容。

如果page-wrap 不是已经在DOM中,则不能使用$(".toggle_container")之类的选择器来更新它们,因为选择器会查看DOM树。 (您的appendTo调用也会失败,因为它会在DOM树中查找具有该ID的元素。)如果page-wrap尚未在DOM中,则您需要更改像这样的代码:

var pageWrap = /* ...whatever creates the page-wrap element ... */;
var toggle = $('<div class="toggle_container"></div>');
toggle.html('<div class="block"><p>'+title+'</p></div>');
toggle.appendTo(pageWrap);
toggle.hide();

(如果你愿意的话,可以稍微压缩一下,将最后三行链接起来。)实例:http://jsbin.com/ukite3/2


偏离主题:我发现在这样的情况下,创建一个独立的极简主义示例可以真正帮助我找到实际的潜在问题。我无法计算我已经确定某些东西是X的次数,然后将X分离出来并发现不,它一直是Y ...: - )

答案 1 :(得分:1)

您可以随时使用

document.getElementById('id').style.display = "none";

因为这将查看所有当前的DOM元素。

答案 2 :(得分:0)

使用.live(),但据我所知,您必须使用事件来进行实际隐藏。什么时候必须隐藏div?

无论如何,live()确保将来创建的元素也包含在某个绑定中,而常规绑定仅适用于页面加载时DOM中的元素。

$(".toggle_container").live('click', function() {
  $(this).hide();
});

一旦“生命”将点击事件绑定到容器。请参阅here以供参考。

答案 3 :(得分:0)

它工作正常http://jsfiddle.net/TMtCz/但是你可以在追加之前隐藏它,如下所示:

$('<div class="toggle_container"></div>').hide().html('<div class="block"><p>'+title+'</p></div>').appendTo('#page-wrap');