Not catching on change event on checkboxs using jquery on

Question

I have a list of questions that is getting loaded from a database when the page loads. I am parsing the list of questions, and added a checkbox to each question. I am planning on adding the id of each check box to an array which I am going to then pass back to the database for further processing.

$.each(data.d.crit1,function(key,value){
    var rowId = 'QID_0'+value.CLASS_QUESTION_ID;
    var codes = value.CODES ? value.CODES : '';
    $("#tblCrit1").append("<tr class='row' id='"+rowId+"'></tr>");
    $("#"+rowId).addClass('critical1').css('cursor','pointer')
        .append("<td class='chckbox'><input type='checkbox' id='cbx_Q"+value.CLASS_QUESTION_ID+"'/></td>")
        .append("<td>"+value.QUESTION_TEXT+"</td>")
        .append("<td>"+codes+"</td>");
});

I am attempting to attach an on change event handler to the check boxes, but for some reason, I cannot get the event to fire.

I've tried a few different methods that I thought should have worked. Something like:

$("input[type=checkbox]").on('change',function(){...});

and a few other permutations with no luck.

I'm apparently doing something wrong, but I can't seem to figure it out. Any help would be appreciated.

Did you attach the onchange handler inside your document.onReady()? — RayGe
– RayGe, Commented Oct 21, 2014 at 14:50

Daniel Conde Marin · Accepted Answer · 2014-10-21 15:04:39Z

1

Try changing the selector $("input[type=checkbox]") to $("input[type='checkbox']")

EDIT: You should have ssomething like this:

$('#tblCrit1').on("click", "input[type='checkbox']", function(){...});

Attach the handler after loading the data.

edited Oct 21, 2014 at 15:04

answered Oct 21, 2014 at 14:51

Daniel Conde Marin

7,7324 gold badges38 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rob M Over a year ago

your edit did the trick. I tried attaching it to the table, but i couldn't get it to fire for me.

Andy Newman · Accepted Answer · 2014-10-21 15:06:46Z

0

It's hard to know exactly without seeing context for the two excerpts, but I expect

$("input[type=checkbox]").on('change',function(){...});

May be being run before the method which adds the checkbox to the page. The on function will only be bound to elements that are on the page at the time it is run.

I would suggest either using

$(document).on('change', 'input[type=checkbox]', function () {...});

Which will attach the listener to document and any change events that bubble up and match the selector will trigger the callback.

Or attach the event listener to the input in the method that creates it, I think this would be neater.

answered Oct 21, 2014 at 15:06

Andy Newman

2813 silver badges3 bronze badges

Collectives™ on Stack Overflow

Not catching on change event on checkboxs using jquery on

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related