Question

我一直在使用标准方法来隐藏/显示一个类，即：

$('.myClass').show();  // or .hide() or .toggle()

但是，如果隐藏了myClass并且创建了该类的新元素，则它是可见的，因为.hide()不会影响它。要解决这个问题，如果在创建时隐藏了类，我会隐藏新创建的元素。

是否有办法让我可以隐藏课程，以便自动应用于后来创建的元素？

我正在考虑模式：$('#container').on('click', '.myClass', function () {...将处理程序附加到稍后创建的元素。基本上，我想用display属性来模拟它。

Answer 1

.myClass应该在您的CSS中有display:none。然后，在需要时致电.show()。

示例：http://jsfiddle.net/imsky/5J5Tt/

Answer 2

实际上，这是一个绑定到DOMNodeInserted事件的示例，只要在大多数较新的浏览器中将元素插入到DOM中，该事件就会触发：

$(document).on('DOMNodeInserted', function(e) {//whenever an element is inserted
    if ($(e.target).is('.myClass')) {          //check if it has the right class
        $(e.target).hide();                    //and hide it if it does
    }
});

它不能在IE中工作，因为没有支持，我似乎记得看过一些变通方法，所以它可能会让它跨浏览器。

这是一个快速DEMONSTRATION

Answer 3

我认为你最好的选择可能是在#container添加一个类，如下所示：

#container .myClass {

  display: none;

}


#container.with-whatevers .myClass {

  display: block;

}


$( '#container' ).on( 'click', '.myClass', function () {

  $( "#container" ).toggleClass( "with-whatevers" );

} );

我不确定你的机制是什么来切换.myClass元素的可见性 - 显然，如果它们被隐藏，你就无法点击一个来切换它们的可见性。

我正在考虑这样的模式：$（'＃container'）。on（'click'，'。myClass'，function（）{...将处理程序附加到稍后创建的元素。

实际上并没有将处理程序附加到稍后创建的元素。它将它附加到#container。然后，其后代上的任何点击事件都会冒泡，如果目标元素与传递给on()的选择器匹配，则将运行处理程序。

Answer 4

在添加点击事件之前隐藏

$('.myClass').hide();

然后使用jQuery的.on（）或.delegate（）方法

$('#container').on('click', '.myClass', function(){
  $(this).toggle();
}

jQuery：隐藏类，以便隐藏随后创建的该类的元素

4 个答案: