Question

I’ve been using the standard method to hide/show a class, namely:

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

However, if myClass is hidden and a new element of the class is created, it is visible because the .hide() did not affect it. To work around this, I hide the newly created element if the class is hidden at the time of creation.

Is there a way, however, so that I can hide the class in such a way that it will apply automatically to subsequently created elements?

I’m thinking of the pattern: $('#container').on('click', '.myClass', function () {... which attaches the handler to elements created later. Essentially, I want to emulate this with the display property.

Answer 1

I’m thinking your best bet might be to add a class to #container, something like this:

#container .myClass {

  display: none;

}


#container.with-whatevers .myClass {

  display: block;

}


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

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

} );

I’m not sure exactly what your mechanism is for toggling the visibility of the .myClass elements — obviously if they’re hidden you can’t click on one to toggle their visibility on.

I’m thinking of the pattern: $(‘#container’).on(‘click’, ‘.myClass’, function () {… which attaches the handler to elements created later.

That does not actually attach the handler to elements created later. It attaches it to #container. Then any click event on its descendents will bubble up, and if the target element matches the selector that was passed to on(), the handler will be run.