CODEWITHSUNDEEP
jqueryhandlebars.js
dtramacchi
dtramacchi

Reputation: 23

jQuery event doesn't fire on Handlebars template

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!

Upvotes: 2

Views: 2794

Answers (4)

Alon
Alon

Reputation: 879

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
});

Upvotes: 0

Chris
Chris

Reputation: 7853

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

Upvotes: 0

jharding
jharding

Reputation: 1414

Use event delegation:

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

Upvotes: 0

s4ty
s4ty

Reputation: 307

try:

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

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

});

Upvotes: 2

Related Questions