jQuery hide future matched element

Question

<div class='my_class'></div>
<div class='my_class'></div>
<div class='my_class'></div>
<div class='my_class'></div>

jQuery('.my_class').hide();
jQuery('.some_other_class').live('click', function(){
// some other stuff that puts in another div with class 'my_class'
});

With this script, the first 4 divs will be hidden on load. However, when I click whatever, the new div will not be. How do I make it so that all future elements matching 'my_class' are automatically hidden as well?

EDIT

I found this here:

$("<style type='text/css'> .redbold{ color:#f00; font-weight:bold;} </style>").appendTo("head"); $("<div/>").addClass("redbold").text("SOME NEWTEXT").appendTo("body");

This is more along the lines of what I would use. Much dryer.

Is there any reason you are not using CSS display:none for that class? — avetarman, Aug 02 '11 at 05:31

Ville Salonen · Accepted Answer · 2011-08-02T05:31:05.823

0

Use jQuery('.my_class').live('hide');

UPDATE: Could you just use CSS code to set display: none; for all my_class elements?

edited Aug 02 '11 at 05:31

answered Aug 02 '11 at 05:19

Ville Salonen

2,654
4
29
34

No, sorry. I remembered that this should work but apparently it doesn't. – Ville Salonen Aug 02 '11 at 05:29
4

This won't work. `.live()` binds an event handler to handle events on future elements. It won't execute an effect on a future element which is what we're after here. – Andrew Cooper Aug 02 '11 at 05:32
I could, I just don't want to tangle CSS into this as well. – awilkening Aug 02 '11 at 05:36
Apparently, there is no way to delegate hide, so this wins by "dry"est. – awilkening Aug 02 '11 at 14:24

Phil.Wheeler · Answer 2 · 2011-08-02T05:27:00.390

0

Basically, you'd want to ensure you've hidden the new element before it's rendered on your page:

jQuery('.my_class').hide();
jQuery('.some_other_class').live('click', function(){
   var myDiv = $('<div />', { "class": "my_class" }).hide().insertAfter('div.my_class:last');
});

edited Aug 02 '11 at 05:27

answered Aug 02 '11 at 05:21

Phil.Wheeler

16,748
10
99
155

I'm trying to keep this as dry as possible. I don't want to put that line in the 3 other scripts that also effect this page. – awilkening Aug 02 '11 at 05:28

score 0 · Answer 3 · answered Aug 02 '11 at 05:30

Not sure if you can do what you're after automatically, but you could try something like this:

jQuery('.some_other_class').live('click', function(){
    var myClassIsVisible = $(.my_class).is(':visible');
    var newDiv = // create new div with class 'my_class'
    newDiv.toggle(myClassIsVisible);
    // insert newDiv into the DOM
});

This would create the new div in the same state as the existing ones.

jQuery hide future matched element

3 Answers3