Why does my jQuery function on jTemplates populated items fail?

Question

I found this link to populate some data dynamically using jQuery, jTemplates and AJAX. I used it to list all the product categories from a database.

What I want is to populate another list that shows all the products inside the clicked category, using the same method described at the above link.

My idea is to list each category name as an individual anchor, place the category name as an 'id' attribute and give the same 'class' attribute to each. This would make it possible to fire a .click() jQuery event which could return the name of the clicked category:

$('.foo').click(function () {
    var target = $(this).attr("id");
    alert(target);
});

The problem is, if I list the category names using jTemplates, the event does not fire. The event fires correctly on an anchor that was not generated by jTemplates.

Answer 1

Maybe as the links are generated dynamically the event handler doesn't get assigned to them. In that case you need to use:

$('.foo').live('click', function () {
            var target = $(this).attr("id");
            alert(target);
        });