Applying javascript to mustache created objects

Question

I have a mustache template in my javascript which gets put into my html

This is made up of H2 tags and ul/li tags

I have this at the bottom of my javascript

    function vara(){
        alert('f')
    }

    $('h2').click(vara)

However this does not work when I click on H2 tags created by the mustache template. How can I remedy this?

Answer 1

Your content is being added by mustache after run-time, and since your handlers are bound at run-time, they have no idea what to bind to. The correct way is to use .on and bind the click event to the container of your appended content.

$(document).on("click", "h2", vara);

Answer 2

By waiting for a document to be ready.