Access dynamically created items using jQuery?

Question

I have a page where some html is being dynamically added to the page.

This is the html and javascript that is created:

Answer 1

You have to bind on() (or the events defined within the on() method, to an element that exists in the DOM at the point at which the jQuery was run. Usually this is on $(document).ready() or similar.

Bind to the closest element in which the $('#btn') element will be appended that exists in the DOM on page-load/DOM ready.

Assuming that you're loading the $('#btn') into the #container div (for example), to give:

    

        Button text
    

Then use:

$('#container').on('click', '#btn', function(){
    alert('Button clicked!');
});