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

Question

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

 .spec { display:none; }

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

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

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

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

由于 jQuery 显示/隐藏函数改变了 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) 使用load 的callback 函数。例如：$('p .special').load('x.html', {}, function(){ //search for new element and bind them new function. ...

恕我直言，第二个更好;)

Answer 4

您似乎正在测试在加载文档时是否选中了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 的用途。