[jQuery] jquery doesn't work after changing innerhtml

[jQuery] jquery doesn't work after changing innerhtml


I discovered this accidentaly today. I have an anchor like
<div id="yy"><a class="xx" href="#">click</a></div> and a simple
jquery like
        jQuery().ready(function() {
        $("a.xx").click(function(event){
            event.preventDefault();
            alert('u clicked');
        });
        });
I run this, works fine, I get the alert when I click on the anchor.
Now I also have a button which when I click it changes the innerHTML
of the div with <a class="xx" href="#">click again</a>. basically it
changes an anchor with another which is the same but only has
different message. But it's still an anchor with xx class. Yet, when I
click on the second anchor, nothing happens. Anyone know why this
happens?Below the code I tried:
Js:
        jQuery().ready(function() {
        $("a.hide").click(function(event){
            event.preventDefault();
            alert('ai facut click pe un a cu class hide');
        });
        });
HTML:
<div id="divb"><a class="hide" href="#">click</a></div>
<input type="button" value="click"
onclick="document.getElementById('divb').innerHTML='<a
class=&quot;hide&quot; href=&quot;#&quot;>click2</a>';";
10x