Javascript 动态创建的DOM元素的持久显示（隐藏/显示）？

我有一组DOM元素，我只想在用户选中控制复选框时显示这些元素。所有这些项都有一个公共类，并且最初是隐藏的：

 .spec { display:none; }

在复选框的单击处理程序中，我最初有以下内容：， 这对现有元素很有效。但是，这些表是通过AJAX动态生成的，当使用“spec”类添加新元素时，选中复选框时不会显示这些表

因为在我的例子中，这是在同一个JS模块中，所以在添加到DOM之后，我总是可以重新执行这段代码。但总的来说，这可能不是真的，所以我的问题是：

解决此问题的常规jQuery方法是什么？

因为jQuery显示/隐藏函数会改变element.style而不是 对于style对象本身，我最终编写了一个jQuery插件来改变 样式表，它工作得很好，但似乎有点杀伤力，这就是问题所在

var nval = btn.checked ? '' : 'none';
$.styleSheet('.spec', 'display', nval );

---

也许改变元素的类别会更好。然后，当您在DOM中添加元素时，可以为它们指定页面所处状态的适当类。

我知道两种解决方案： 1） 对尚不存在的元素使用

live

，例如：`$（'a.special'）.live（“单击”，function（）{…}）

2） 使用

加载

的

回调

功能。例如：

$（'p.special'）.load（'x.html'，{}，function（）{//搜索新元素并将其绑定到新函数….

---

IMHO second更好；）

看起来您正在测试加载文档时是否选中或取消选中了

btn

。而不是（或除了）为此，请添加一个事件处理程序，每当用户与复选框交互时都会触发该处理程序。

change

处理程序就是您想要的处理程序。这将始终使用DOM的当前状态，因此它将包括任何新添加的元素：

$(btn).change(function(){
  $('.spec').toggle();
});

为简单起见，我使用了

切换

处理程序将

显示：隐藏

更改为

显示：块

/

内联

，反之亦然。如果希望显式，可以这样做：

$(btn).change(function(){
  $('.spec')[$(this).val() ? 'show' : 'hide']();
});

---

你想出了两个很好的解决方案，并把它们都击倒了：）

如果您正在寻找一个简单的解决方案，那么重新运行

$（“.spec”）.show（）

似乎是最好的

---

否则，我不明白为什么调整样式表是一种过分的做法？这正是应该做的——你想用给定的类控制所有元素的表示，包括现有的和动态添加的。这正是CSS的用途。

你应该向

（或其他父元素）添加一个类然后通过jQuery切换该类

CSS:

JS:

---

我想到了这一点，但目前JS代码不知道模板（创建元素的模板）的详细信息。元素本身没有事件处理程序，所以我认为$.live（）不起作用，是吗？我将研究一下.load（），我认为它不适用。$.load（）函数没有帮助，因为：（1）我正在从服务器返回的XML创建HTML，（2）这不是事件处理，而是我想要更改的可见性。请参阅我的帖子，开头是“我可以一直…”。不，正如我所说，我是在复选框的单击处理程序中这样做的…”。这不是问题，这是动态DOM元素。啊，确实是。很抱歉我错过了。这非常有效，谢谢。看起来很明显，但只是回顾一下。因为我最初想隐藏它们，而主体是外部定义的，所以我使用DOM元素用定义为“wrapper.hideStuff.sp”的hideStuff包装“spec”元素ec{display:none；}`老鼠，我说得太快了。当IE中的元素出现在表中时，它不起作用，因为表的CSS继承被破坏了。我想我还是坚持使用我的

$styleSheet（）

方法。也许为IE添加一个额外的CSS选择器也会有所帮助？（#例如，wrapper.hideStuff table tr.spec{}）这一点很有道理——但“过度杀戮”是在编写jQuery插件的时候，到目前为止，我只在一个地方需要它，正如您所指出的，我可以将显示/隐藏调用添加到创建阶段。但是，由于我想保持数据处理和UI分离，并且jQuery不支持SS修改，我问：“解决这个问题的常规jQuery方法是什么？”这是我在编写插件后发现的一个页面：

$(btn).change(function(){
  $('.spec')[$(this).val() ? 'show' : 'hide']();
});

body.spec_is_hidden .spec {
  display: none;
}

if (btn.checked)
    $('body').addClass('spec_is_hidden');
else
    $('body').removeClass('spec_is_hidden');