jQuery hide future matched element

<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 t开发者_如何学Pythonhe lines of what I would use. Much dryer.

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

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

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');
});

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.