Binding event to dynamically added elements to DOM using jQuery

dom, html, jquery

Solution

Delegation via `.on` doesn't work that way. You have to call `.on` on the element and then use the second argument as the delegation selector:

$(document).on("click", "#dyna", function() {

http://jsfiddle.net/jYQ2D/2/

Documentation. Also be aware that there can be only one `#dyna` element.

Problem

I'm dynamically adding few elements to DOM. And I want to manipulate these element behavior using `.on()` function of jQuery. But somehow DOM is not firing `.on()` event for dynamically added elements. Here is JS Fiddle that shows the example - http://jsfiddle.net/jYQ2D/1/ When I click on "Dynamically Added in HTML" button, it should show alert message but it is not showing. Any idea why?

Original source