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

You can try this:

$(document).ready(function() {
    /* ... code to append <a> tags to nav div.  */      

    $("#nav a").each(function() {
        $(this).click(function(e) {
            console.log('Clicked ' + e.target.id);
            return false;   
        });
    });
});

However, these both are the same! There’s no problem with your code. Check the tag generating code for bugs.