时间戳

首页 > 解决方案 > 无法使动态创建的复选框起作用

javascript - 无法使动态创建的复选框起作用

问题描述

我一直在寻找解决方案的网站，但是我没有运气让它工作。这段代码所需的最终结果将是使用复选框隐藏和显示表格上的行 - 复选框默认设置为选中，因为默认情况下所有表格都显示，代码末尾是我当前的方法试图让复选框激活。

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

}

编辑：按下位于每个表上的按钮，它调用一个函数来显示搜索/过滤器 div，以及下面的代码来填充它的内容

标签： javascriptjquery

解决方案

在 jquery on 函数中传递第三个参数，如下所示：

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

这会将任何未来的元素与创建的“.checkboxClass”绑定到同一个函数。

推荐阅读