jQuery event doesn't fire on Handlebars template

Question

This is my first time using stackoverflow. Hopefully everything makes sense.

I'm using tableTop.js and Handlebars to bring data from a google spreadsheet.

When data is loaded each one has a radio button associated which needs to trigger an event when selected (at the moment just an alert box).

My problem is that when I click it nothing happens. However if I hardcode in the exact same code (not pulled in from spreadsheet) then it the alert fires as normal.

Below is a link to demonstrate http://jsfiddle.net/danieltramacchi/zgSvY/

Code to fire event

$(document).ready(function () {

    $(".sem-box").on("change", function () {

        var location = $(this).find("h3").html();
        alert(location);

    });
});

The radio buttons that appear initially will fire the alert but if you click the image it will remove it and pull in data from the spreadsheet.

Any help would be greatly appreciated!

Answer 1

try:

$("#seminar").on("change", ".sem-box",function () {

    var location = $(this).find("h3").html();
    alert(location);

});

Answer 2

The change method won't work on a div element.

The change event is sent to an element when its value changes. This event is limited to input elements, textarea boxes and select elements.

http://api.jquery.com/change/

you can try something like this:

$(".sem-box").find('input[type=radio]').change(function () {
    //code
});

Answer 3

Use event delegation:

$('#seminar').on('change', '.sem-box', function () {
  var location = $(this).find('h3').html();
  alert(location);
});

Answer 4

It seems like you're trying to bind a "change" event to a div element. I don't think that a change element will be propagated up the DOM tree. See this question. So Your handler will be set on the div element but the "change" event will never be fired.

Something like this:

$("input[name=radioButtonGroup]").change(function () {
 ...
}

will possibly do the job.

Also see this fiddle