jQuery hide future matched element
<pre><code>&lt;div class='my_class'&gt;&lt;/div&gt;
&lt;div class='my_class'&gt;&lt;/div&gt;
&lt;div class='my_class'&gt;&lt;/div&gt;
&lt;div class='my_class'&gt;&lt;/div&gt;

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

<p>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?</p>

<p><em>EDIT</em></p>

<p>I found this <a href="http://stackoverflow.com/questions/1212500/jquery-create-css-rule-class-runtime">here</a>:</p>

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

<p>This is more along the lines of what I would use.  Much dryer.</p>
