Javascript: Created element with attributes in JS not read by function

Question

supposing I have 5 checkboxes that I created manually through HTML, all of which have the attributes; Name, Type and Value. All of those checkboxes, when checked triggers an event which allows a button to be enabled. (Code below)

    $('input[type="checkbox"]').click(function() {
        var $this = $(this);
        if ($this.is(':checked')) {
            $("#deleteModalTrigger").prop("disabled",false);
        } else {
            $("#deleteModalTrigger").prop("disabled",true);
        }
    });

Now, I create another checkbox through javascript and append it to a row in a table. It appears in the view, but checking it does not trigger the code above even though it is also a checkbox.

            var column1 = document.createElement('td');
            var cb1 = document.createElement('input');
            cb1.type="checkbox";
            cb1.name="foo";
            cb1.value="Something-cbvalue-0";
            column1.setAttribute("rowspan","2");
            column1.appendChild(cb1);
            row.appendChild(column1);

Any help is appreciated! Thank you.

Bhadra · Accepted Answer · 2014-01-22 06:05:53Z

4

as the checkbox is added dynamically after the dom is loaded

$('input[type="checkbox"]').click(function() {

this click event is not binded to the newly added element try using

$(document).on('click','input[type="checkbox"]',function() {

answered Jan 22, 2014 at 6:05

Bhadra

2,1041 gold badge13 silver badges19 bronze badges

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

1 Comment

rnldpbln Over a year ago

Thank you sir! That worked :) SO says I can't accept your answer as correct for 11 more minutes. I will mark it as correct once the time is up. Thank you again!

user3040830 · Accepted Answer · 2014-01-22 06:10:16Z

0

You Can use the on function to get the change event of newly created checkbox. Inside that function you can check the checked property and make the target button as enabled or disabled.

$(document).on('change','yourCheckboxID',function(){

    if($(this).prop('checked'))
      {

            //Disable or enable the button

      }

})

answered Jan 22, 2014 at 6:10

user3040830

Collectives™ on Stack Overflow

Javascript: Created element with attributes in JS not read by function

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