jQuery adding event handlers to eval'ed elements

Question

I've a table generated dynamically by jQuery, using

this.html("<table><tr><td><div>Click Me</div></td></tr></table>");

within the table, I've a few divs (my sample shows only one to keep things simple), which I want to add click event handler to. I'd like to keep html clean and use as much of jQuery power as I can, but since I'm doing an 'eval' type of things I can't quite figure out how to do that.

I know, that I can use $("div[some attribute selector]").on("click", {}, clickHandler);, but is it a good idea in my case?

Answer 1

You need delegated events. To do that, simply use jQuerys on() method like this:

$(document.body).on('click', 'div', function( event ) {
    // do something
});

Ref.: .delegate(), .on()

What is that? Almost all events do what we call 'bubble'. That means, if you click on a nested element, your browser looks if there is any click-event handler ascociated on that node. If so, it executes them and then the parent of that element is also asked if there is any click-event handler. This continues until either some handler prevents the event from further bubbling or we have reached the document.documentElement (html).

So, you should change the above document.body into the closest node relative to your dynamically added elements.