Question

我试图隐藏一些我使用.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

由于

Answer 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 ...： - ）

Answer 2

您可以随时使用

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

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

Answer 3

使用.live（），但据我所知，您必须使用事件来进行实际隐藏。什么时候必须隐藏div？

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

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

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

Answer 4

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

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

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

4 个答案: