2

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

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

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

但是，有没有办法让我可以隐藏该类，使其自动应用于随后创建的元素？

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

4

4 回答 4

1

.myClass应该display:none在你的 CSS 中。然后，.show()在您需要时拨打电话。

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

于 2012-08-05T02:01:40.827 回答
1

实际上，这是一个绑定到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 中不起作用，因为没有支持，我似乎记得看过一些解决方法，所以它可能可以跨浏览器。

这是一个快速演示

于 2012-08-05T02:01:51.963 回答
1

我认为你最好的选择可能是添加一个类#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()，则将运行处理程序。

于 2012-08-05T02:05:52.063 回答
0

在添加点击事件之前隐藏

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

然后使用 jQuery 的 .on() 或 .delegate() 方法

$('#container').on('click', '.myClass', function(){
  $(this).toggle();
}
于 2012-08-05T01:58:30.723 回答