Unable to get dynamically created checkboxes to work

Question

I've been searching the site for a solution however, ive had no luck getting this to work. The desired end result for this piece of code will be to hide and show rows on a table with the checkboxes - the checkboxes are default set to checked as the tables by default are all shown, at the end of the code is my current method of trying to get the checkboxes to activate.

function searchContents(table, noRows) {
    document.getElementById('dynamicSearchContents').innerHTML = "";
    //locals declarations
    var i;
    var checkboxes = [];
    //labels
    var lables = [];
    var bikesTableRows = ["Bike ID", "Bike Status", "Bike Cost", "Bike type", "Last Maintainance", "Lock Code", "Depot"];
    var staffTableRows = ["Staff ID", "Fullname", "Role", "DOB", "Full Address", "Mobile", "Landline", "Email", "Notes"];
    var repairTableRows = ["Repair ID", "Bike ID", "Fault", "Reported Data", "Repair Started", "Reapir Completed", "Parts Required", "Assigned Mechanic", "Repair Notes"];
    var customerTableRows = ["Customer ID", "Fullname", "DOB", "Full Address", "Mobile", "Landline", "Email", "Notes"];
    var collectionsTableRows = ["Job ID", "Collection Depot", "Delivery Depot", "Time and Date Started", "Time and Date Completed", "Assigned Driver"];

    for (i = 0; i < noRows; i++) {
        //creation
        var br = document.createElement("br");
        checkboxes[i] = document.createElement('input');
        lables[i] = document.createElement('label');

        //setting
        checkboxes[i].type = "checkbox";
        checkboxes[i].name = "checkbox" + i;
        checkboxes[i].value = "value";
        checkboxes[i].checked = "true";
        checkboxes[i].class = "checkboxClass"
        checkboxes[i].id = "checkbox" + i;
        lables[i].htmlFor = "checkbox" + i;

        //what lables
        if (table === "bikeInnerTable") {
            console.log("Bikes Lables")
            lables[i].appendChild(document.createTextNode(bikesTableRows[i]));
        }else if (table === "staffInnerTable") {
            console.log("Staff Lables")
            lables[i].appendChild(document.createTextNode(staffTableRows[i]));
        }else if (table === "repairInnerTable") {
            console.log("Repair Lables")
            lables[i].appendChild(document.createTextNode(repairTableRows[i]));
        }else if (table === "customerInnerTable") {
            console.log("Customer Lables")
            lables[i].appendChild(document.createTextNode(customerTableRows[i]));
        }else if (table === "collectionsInnerTable") {
            console.log("Collections Lables")
            lables[i].appendChild(document.createTextNode(collectionsTableRows[i]));
        }

        //appending
        document.getElementById('dynamicSearchContents').appendChild(lables[i]);
        document.getElementById('dynamicSearchContents').appendChild(checkboxes[i]);
        document.getElementById('dynamicSearchContents').appendChild(br);
}



$('.checkboxClass').on('change', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
        {
            console.log("blahahaha");
        }
    });

}

Edit: A button is pressed which is located on each of the tables, it calls a function to show the search/filter div, and also the below code to populate it's contents

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Taplar, Apr 25 '18 at 15:56
^ The assumption being that you are calling `searchContents` some point later after the binding logic has ran. — Taplar, Apr 25 '18 at 15:57
Which would be after the binding logic happens, so yeah. Read the duplicate post about how to approach this issue. — Taplar, Apr 25 '18 at 16:00
you can instead addClass and toggle it then style the css for it and the `input` takes value `1` or remove the `value` at all — mooga, Apr 25 '18 at 16:06

score 0 · Accepted Answer · answered Apr 25 '18 at 16:26

Pass the third argument in the jquery on function like so:

$('body').on('change', '.checkboxClass', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
        {
            console.log("blahahaha");
        }
    });
}

This will bind any future elements with '.checkboxClass' that are created to this same function.

Unable to get dynamically created checkboxes to work

1 Answers1