When you use innerHtml it completely destroys the anchor tag and
replaces it with another one. Not sure if jQuery does this or the
browser, but when you destroy an element, all event listeners are
destroyed too. So you'll either have to re-initialize the click
listener when you use innerHtml, or just simply change the text of the
anchor tag like so:
$("a.xx").click(function(){
var $this = $(this);
event.preventDefault();
if($this.text() == "click") {
$this.text("click again");
} else {
$this.text("click");
}
});
By changing the text of an element allows for the event listener to
remain in place, since the element itself didn't actually get
destroyed.
Hope this helps
On May 6, 4:58 am, biggie_mac <[EMAIL PROTECTED]> wrote:
> 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="hide" href="#">click2</a>';";
>
> 10x
