Knockout.js无法选中动态添加的复选框

我正在进行我的第一个淘汰项目，我发现当复选框被动态添加到页面时，我无法选中它们。我已经尝试了来自淘汰赛网站的演示代码，它本身运行良好，但我的实现没有。结果对“已检查”没有约束力，我的警报也不会触发。当我单击框时，框的状态不会改变，并且没有javascript错误

<div class="report">
<label>start date</label>
<input type="text" id="date-from" data-bind="value: startDate" />
<span>to </span>
<input type="text" id="date-to" data-bind="value: endDate" />
<label>product code</label>
<input type="text" id="product-code" data-bind="value: productCode" />
<label>lead type</label>
<select id="lead-type" data-bind="value: leadType">
    <option value="0" selected="selected">all</option>
    <option value="B">sales</option>
    <option value="Q">enquiries</option>
    <option value="F">failed purchases</option>
    <option value="C">cancelled purchases</option>
</select>
<input type="submit" id="submit-query" class="button" data-bind="click: load" value="Go"/>

$(document).ready(function () {
    var reportsViewModel = function() {
        var self = this;
        self.startDate = ko.observable();
        self.endDate = ko.observable();
        self.productCode = ko.observable();
        self.leadType = ko.observable();
        self.wantsSpam = ko.observable(true);
        self.alert = function () {
            alert(self.isActioned());
        };

        var queryData = {
            startDate: self.startDate,
            endDate: self.endDate,
            productCode: self.productCode,
            isActioned: false,
            leadType: self.leadType
        };

        function orderModel(item) {
            this.OrderDate = ko.observable(item.OrderDate),
            this.Prefix = ko.observable(item.Prefix),
            this.FirstName = ko.observable(item.FirstName),
            this.LastName = ko.observable(item.LastName),
            this.Country = ko.observable(item.Country),
            this.DateofBirth = ko.observable(item.DateofBirth),
            this.Telephone = ko.observable(item.Telephone),
            this.CustEmail = ko.observable(item.CustEmail),
            this.gbac = ko.observable(item.gbac),
            this.isActioned = ko.observable(true)
        };

        self.reportItems = ko.observableArray([]);

        self.load = function () {
            $.ajax({
                url: sf.getServiceRoot('CC_Reporting') + "Report/getLeads",
                type: "POST",
                data: queryData,
                beforeSend: sf.setModuleHeader
            }).done(function (data, status) {
                if (data == "There are no records which match your search.") {
                    alert(data);
                    return;
                } else {
                    self.reportItems.removeAll();
                    $.each(data, function (i, item) {
                        console.log(item);
                        self.reportItems.push(new orderModel(item));
                    });
                }
            }).fail(function (data) {
                alert(data);

            });
        }


    };

    ko.applyBindings(new reportsViewModel());

---

}))

您的代码中有几个错误

$(document).ready(function () {
    var reportsViewModel = function() {
        var self = this;
        self.startDate = ko.observable();
        self.endDate = ko.observable();
        self.productCode = ko.observable();
        self.leadType = ko.observable();
        self.wantsSpam = ko.observable(true);
        self.alert = function () {
            alert(self.isActioned());
        };

        var queryData = {
            startDate: self.startDate,
            endDate: self.endDate,
            productCode: self.productCode,
            isActioned: false,
            leadType: self.leadType
        };

        function orderModel(item) {
            this.OrderDate = ko.observable(item.OrderDate),
            this.Prefix = ko.observable(item.Prefix),
            this.FirstName = ko.observable(item.FirstName),
            this.LastName = ko.observable(item.LastName),
            this.Country = ko.observable(item.Country),
            this.DateofBirth = ko.observable(item.DateofBirth),
            this.Telephone = ko.observable(item.Telephone),
            this.CustEmail = ko.observable(item.CustEmail),
            this.gbac = ko.observable(item.gbac),
            this.isActioned = ko.observable(true)
        };

        self.reportItems = ko.observableArray([]);

        self.load = function () {
            $.ajax({
                url: sf.getServiceRoot('CC_Reporting') + "Report/getLeads",
                type: "POST",
                data: queryData,
                beforeSend: sf.setModuleHeader
            }).done(function (data, status) {
                if (data == "There are no records which match your search.") {
                    alert(data);
                    return;
                } else {
                    self.reportItems.removeAll();
                    $.each(data, function (i, item) {
                        console.log(item);
                        self.reportItems.push(new orderModel(item));
                    });
                }
            }).fail(function (data) {
                alert(data);

            });
        }


    };

    ko.applyBindings(new reportsViewModel());

首先，正如我提到的，在循环中的DOM节点上具有

id

属性是非法的

$(document).ready(function () {
    var reportsViewModel = function() {
        var self = this;
        self.startDate = ko.observable();
        self.endDate = ko.observable();
        self.productCode = ko.observable();
        self.leadType = ko.observable();
        self.wantsSpam = ko.observable(true);
        self.alert = function () {
            alert(self.isActioned());
        };

        var queryData = {
            startDate: self.startDate,
            endDate: self.endDate,
            productCode: self.productCode,
            isActioned: false,
            leadType: self.leadType
        };

        function orderModel(item) {
            this.OrderDate = ko.observable(item.OrderDate),
            this.Prefix = ko.observable(item.Prefix),
            this.FirstName = ko.observable(item.FirstName),
            this.LastName = ko.observable(item.LastName),
            this.Country = ko.observable(item.Country),
            this.DateofBirth = ko.observable(item.DateofBirth),
            this.Telephone = ko.observable(item.Telephone),
            this.CustEmail = ko.observable(item.CustEmail),
            this.gbac = ko.observable(item.gbac),
            this.isActioned = ko.observable(true)
        };

        self.reportItems = ko.observableArray([]);

        self.load = function () {
            $.ajax({
                url: sf.getServiceRoot('CC_Reporting') + "Report/getLeads",
                type: "POST",
                data: queryData,
                beforeSend: sf.setModuleHeader
            }).done(function (data, status) {
                if (data == "There are no records which match your search.") {
                    alert(data);
                    return;
                } else {
                    self.reportItems.removeAll();
                    $.each(data, function (i, item) {
                        console.log(item);
                        self.reportItems.push(new orderModel(item));
                    });
                }
            }).fail(function (data) {
                alert(data);

            });
        }


    };

    ko.applyBindings(new reportsViewModel());

其次，您的

click

绑定位于

foreach

绑定中，因此它的上下文是

orderModel

，但函数位于父对象上。使用

单击：$parent.alert

调用正确的函数

$(document).ready(function () {
    var reportsViewModel = function() {
        var self = this;
        self.startDate = ko.observable();
        self.endDate = ko.observable();
        self.productCode = ko.observable();
        self.leadType = ko.observable();
        self.wantsSpam = ko.observable(true);
        self.alert = function () {
            alert(self.isActioned());
        };

        var queryData = {
            startDate: self.startDate,
            endDate: self.endDate,
            productCode: self.productCode,
            isActioned: false,
            leadType: self.leadType
        };

        function orderModel(item) {
            this.OrderDate = ko.observable(item.OrderDate),
            this.Prefix = ko.observable(item.Prefix),
            this.FirstName = ko.observable(item.FirstName),
            this.LastName = ko.observable(item.LastName),
            this.Country = ko.observable(item.Country),
            this.DateofBirth = ko.observable(item.DateofBirth),
            this.Telephone = ko.observable(item.Telephone),
            this.CustEmail = ko.observable(item.CustEmail),
            this.gbac = ko.observable(item.gbac),
            this.isActioned = ko.observable(true)
        };

        self.reportItems = ko.observableArray([]);

        self.load = function () {
            $.ajax({
                url: sf.getServiceRoot('CC_Reporting') + "Report/getLeads",
                type: "POST",
                data: queryData,
                beforeSend: sf.setModuleHeader
            }).done(function (data, status) {
                if (data == "There are no records which match your search.") {
                    alert(data);
                    return;
                } else {
                    self.reportItems.removeAll();
                    $.each(data, function (i, item) {
                        console.log(item);
                        self.reportItems.push(new orderModel(item));
                    });
                }
            }).fail(function (data) {
                alert(data);

            });
        }


    };

    ko.applyBindings(new reportsViewModel());

第三，当

isActioned

属性位于项目上时，您的

alert

函数正在查看

self

中的

isActioned

属性。在函数上使用一个参数来捕获调用上下文，如下所示：

$(document).ready(function () {
    var reportsViewModel = function() {
        var self = this;
        self.startDate = ko.observable();
        self.endDate = ko.observable();
        self.productCode = ko.observable();
        self.leadType = ko.observable();
        self.wantsSpam = ko.observable(true);
        self.alert = function () {
            alert(self.isActioned());
        };

        var queryData = {
            startDate: self.startDate,
            endDate: self.endDate,
            productCode: self.productCode,
            isActioned: false,
            leadType: self.leadType
        };

        function orderModel(item) {
            this.OrderDate = ko.observable(item.OrderDate),
            this.Prefix = ko.observable(item.Prefix),
            this.FirstName = ko.observable(item.FirstName),
            this.LastName = ko.observable(item.LastName),
            this.Country = ko.observable(item.Country),
            this.DateofBirth = ko.observable(item.DateofBirth),
            this.Telephone = ko.observable(item.Telephone),
            this.CustEmail = ko.observable(item.CustEmail),
            this.gbac = ko.observable(item.gbac),
            this.isActioned = ko.observable(true)
        };

        self.reportItems = ko.observableArray([]);

        self.load = function () {
            $.ajax({
                url: sf.getServiceRoot('CC_Reporting') + "Report/getLeads",
                type: "POST",
                data: queryData,
                beforeSend: sf.setModuleHeader
            }).done(function (data, status) {
                if (data == "There are no records which match your search.") {
                    alert(data);
                    return;
                } else {
                    self.reportItems.removeAll();
                    $.each(data, function (i, item) {
                        console.log(item);
                        self.reportItems.push(new orderModel(item));
                    });
                }
            }).fail(function (data) {
                alert(data);

            });
        }


    };

    ko.applyBindings(new reportsViewModel());

self.alert = function (item) {
        alert(item.isActioned());
        return true;
    };

第四，注意

返回true

。如果没有这个选项，

click

事件会吃掉单击，阻止它取消选中复选框，这是您不希望发生的。返回true会导致敲除，让事件冒泡

$(document).ready(function () {
    var reportsViewModel = function() {
        var self = this;
        self.startDate = ko.observable();
        self.endDate = ko.observable();
        self.productCode = ko.observable();
        self.leadType = ko.observable();
        self.wantsSpam = ko.observable(true);
        self.alert = function () {
            alert(self.isActioned());
        };

        var queryData = {
            startDate: self.startDate,
            endDate: self.endDate,
            productCode: self.productCode,
            isActioned: false,
            leadType: self.leadType
        };

        function orderModel(item) {
            this.OrderDate = ko.observable(item.OrderDate),
            this.Prefix = ko.observable(item.Prefix),
            this.FirstName = ko.observable(item.FirstName),
            this.LastName = ko.observable(item.LastName),
            this.Country = ko.observable(item.Country),
            this.DateofBirth = ko.observable(item.DateofBirth),
            this.Telephone = ko.observable(item.Telephone),
            this.CustEmail = ko.observable(item.CustEmail),
            this.gbac = ko.observable(item.gbac),
            this.isActioned = ko.observable(true)
        };

        self.reportItems = ko.observableArray([]);

        self.load = function () {
            $.ajax({
                url: sf.getServiceRoot('CC_Reporting') + "Report/getLeads",
                type: "POST",
                data: queryData,
                beforeSend: sf.setModuleHeader
            }).done(function (data, status) {
                if (data == "There are no records which match your search.") {
                    alert(data);
                    return;
                } else {
                    self.reportItems.removeAll();
                    $.each(data, function (i, item) {
                        console.log(item);
                        self.reportItems.push(new orderModel(item));
                    });
                }
            }).fail(function (data) {
                alert(data);

            });
        }


    };

    ko.applyBindings(new reportsViewModel());

---

最后，没有任何东西在调用self.load（），因此您的ajax永远不会启动。这里是，略作精简。

当您不提供任何示例数据时，这很难测试，但一个问题是您的复选框在循环中有一个

id

，这意味着它将生成无效的HTML。此外，您应该将

applyBindings

调用移动到DOM就绪函数中；您不能在元素存在之前绑定到它们。谢谢您的回复。我已经删除了id属性，但没有看到行为的变化。另外，关于结束语，我也很有眼光。我忘了在这个片段中添加它，但它在我的原始代码中。谢谢你的帮助。我已经为字段和提交按钮添加了html。至于你的例子，作为一个不熟悉语法的人有点让人困惑。我似乎仍然无法使我的榜样发挥作用。如果我接受输入并将其放在表外，那么单击绑定可以正常工作。似乎只有在动态添加复选框时才会出现问题..？此外，如果我将绑定移动到按住复选框的位置，单击绑定也不会出现问题，会出现警报您已完全更改了问题内容。HTML与您最初发布的内容完全不同。我不会再帮你了。谢谢你到现在为止的帮助。这个问题仍然没有改变。当knockout通过迭代可观察数组创建复选框时，我的复选框不可单击。当我说不可点击时，我的意思是复选框不会相应地显示或删除复选标记

$(document).ready(function () {
    var reportsViewModel = function() {
        var self = this;
        self.startDate = ko.observable();
        self.endDate = ko.observable();
        self.productCode = ko.observable();
        self.leadType = ko.observable();
        self.wantsSpam = ko.observable(true);
        self.alert = function () {
            alert(self.isActioned());
        };

        var queryData = {
            startDate: self.startDate,
            endDate: self.endDate,
            productCode: self.productCode,
            isActioned: false,
            leadType: self.leadType
        };

        function orderModel(item) {
            this.OrderDate = ko.observable(item.OrderDate),
            this.Prefix = ko.observable(item.Prefix),
            this.FirstName = ko.observable(item.FirstName),
            this.LastName = ko.observable(item.LastName),
            this.Country = ko.observable(item.Country),
            this.DateofBirth = ko.observable(item.DateofBirth),
            this.Telephone = ko.observable(item.Telephone),
            this.CustEmail = ko.observable(item.CustEmail),
            this.gbac = ko.observable(item.gbac),
            this.isActioned = ko.observable(true)
        };

        self.reportItems = ko.observableArray([]);

        self.load = function () {
            $.ajax({
                url: sf.getServiceRoot('CC_Reporting') + "Report/getLeads",
                type: "POST",
                data: queryData,
                beforeSend: sf.setModuleHeader
            }).done(function (data, status) {
                if (data == "There are no records which match your search.") {
                    alert(data);
                    return;
                } else {
                    self.reportItems.removeAll();
                    $.each(data, function (i, item) {
                        console.log(item);
                        self.reportItems.push(new orderModel(item));
                    });
                }
            }).fail(function (data) {
                alert(data);

            });
        }


    };

    ko.applyBindings(new reportsViewModel());