Question

Here’s the thing –
a click event adds a bunch of elements on the page, and they all have the same id (is there something wrong here?).

I use a live function to assign click event to all of these elements:

$("#tag").live('click', function() {
console.log($("#tag").html());
});

When I click on any of them, only the value of first element gets logged.

How can I let the click event know on which of this elements I actually click?
Thanks a lot!

Update: using classes and $(this) is the way to go. Problem solved. Thanks griegs and John!

Answer 1

If the added elements really do all have the same ID, and not the same class, then this is a problem. You’ll need to post the code that’s adding the elements if you’d like help with that.

I can see from the code you posted that you’re attaching the live method to the .tag class, but inside the function you’re referring to an element with ID #tag instead. You might want to read up on the difference between classes and IDs.

Try this, to solve your problem:

$(".tag").live('click', function() { 
    console.log($(this).html()); 
});

Alternatively, you can do the following to get the clicked-on element:

$(".tag").live('click', function(event) { 
    console.log($(event.target).html()); 
});