Question

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

 .spec { display:none; }

在复选框的点击处理程序中，我原来有以下内容，这适用于现有元素。但是，这些表是通过AJAX动态生成的，而当使用“spec”类添加新元素时，在选中复选框时不会显示它们。

// Basic jQuery show/hide
if (btn.checked)
    $('.spec').show();
else
    $('.spec').hide();

因为在我的情况下，这是在相同的JS模块中，所以我总是可以在添加到DOM之后重新执行此代码。但总的来说，这可能不是真的，所以我的问题是：

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

由于jQuery show / hide函数改变了element.style而不是样式对象本身，我最终编写了一个改变它的jQuery插件样式表，工作正常，但似乎过度杀人，因此问题。

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

Answer 1

为此，您应该向<body>（或其他一些父元素）添加一个类，然后通过jQuery切换该类。

CSS：

body.spec_is_hidden .spec {
  display: none;
}

JS：

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

Answer 2

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

Answer 3

我知道2个解决方案： 1）使用live作为尚不存在的元素，例如：`$（'a .special'）。live（“click”，function（）{...}）;

2）使用callback的{{1}}功能。例如：load

恕我直言第二个更好;）

Answer 4

在doc加载时，您似乎正在测试btn是否已选中或未选中。而不是（或除此之外）添加一个事件处理程序，只要用户与复选框进行交互，就会触发该事件处理程序。 change处理程序是您想要的。这将始终使用DOM的当前状态，因此它将包含任何新添加的元素：

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

为简单起见，我使用toggle处理程序将display:hidden更改为display:block / inline，反之亦然。如果你想明确，你可以这样做：

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

Answer 5

你提出了两个很好的解决方案并将它们两个击落：）

如果您正在寻找一个简单的解决方案，重新运行$(".spec").show()似乎是最好的。

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