jquery click handler

Question

I create a bunch of tags dynamically, appending them to a I then add a click handler...

$(document).ready(function(){
    // ... code to append <a> tags to nav div        
    $("#nav a").click(function(event){ 
       alert('Clicked '+event.target.id);
       return false;
    });
});

If I have 10 tags as a result of this and click the first one, I get 10 (TEN!) alerts - but they all show the id of the tag I actually clicked.

(If I click the 5th tag, yep, I get 5 alerts - all with the 5th tag's id...)

What's going on here? Is it because I dynamically created the tags? Is there a way to avoid it?

Thanks

Answer 1

Try:

$(document).ready(function(){
    // ... code to append <a> tags to nav div        
    $("#nav a").click(function(event){ 
       alert('Clicked '+ this.id); // replaced with "this"
       return false;
    });
});

And make sure that your code is valid, eg:

<nav id="nav">
<a id="1" href="#"></a>
<a id="2" href="#"></a>
// ...
</nav>

Answer 2

Hmmm... I think you should check if your tags are being closed correctly. Use firebug to check the generated HTML. You'd might get this if your html looked like

<a>one<a>two<a>three</a></a></a>

Answer 3

Try this instead:

$(document).ready(function(){
    /* ... code to append <a> tags to nav div  */      
    $("#nav a").each(function(){
            $(this).click(function(el){
               alert('Clicked '+el.target.id);
               return false;   
            });
    });
});

Anyway, these both are the same! there shall be no problem with your code, too. Check the tag generating code.

Answer 4

first use firebug to see if the id are actually placed correctly then i will change your code thos this and see if it works.

$(document).ready(function(){
    // ... code to append <a> tags to nav div        
    $("#nav a").click(function(event){ 
       alert('Clicked '+ $(this).attr('id'));
       return false;
    });
});

Answer 5

Your code is correct, at least it worked for me here in my test.

The problem can be IE6 weirdness or just a CSS problem with position:absolute; Display:block;

It seems to me NOT a javascript problem.

Answer 6

Just as others have noticed, I think that there is something wrong with the code that you're using to dynamically generate the anchors.

Nonetheless, here's an example that should achieve the result you're aiming for:

$(document).ready(function(){

  var eNav = document.getElementById('nav');

  var aLink = null;
  for(var i = 0; i < 5; i++) {
    aLink = document.createElement('a');
    aLink.href = 'javascript:;';
    aLink.id = i;
    aLink.appendChild(document.createTextNode('Link'));
    eNav.appendChild(aLink);
  }

  $("#nav a").click(function(event){ 
    alert('Clicked '+ event.target.id);
    return false;
  });

});

Answer 7

It sounds to me like your binding the event handler function x number of times to each element where x is the index of that element (+ 1) in the array/object properties over which you're iterating to do the binding.

How are you appending the <a> elements to the DOM? Can you show the complete relevant code?