Question

I am a bit confused, I have a bunch of elements that get added via jquery using a ajax call and I want to attach a click handler to them (there could be a lot).

But I have no idea how to even begin this, I looked at .on and it is really confusing. I want to attach a click event handler for a certain class so that when I click on it, I get the this.id and then do stuff with it.

Answer 1

What you’re trying to do is called event delegation.

You want to set the event listener on a higher element in the DOM that’ll never change, but only fire off the event handler if the child element that has been clicked matches a specific selector.

Here’s how it’s done with jQuery’s .on():

$(document).on('click', '.your-selector', function(){
    alert(this.id);
});

---

P.S. You could probably apply the event listener to an element lower down in the DOM tree…