$root 视图模型上的单击事件不起作用答案

【问题标题】：click event on $root view model not working$root 视图模型上的单击事件不起作用
【发布时间】：2017-08-01 04:21:58
【问题描述】：

我尝试使用带有淘汰赛js的嵌套循环这是我的代码：

self.MachineGroups = ko.observableArray();
$.each(mdl.MachineGroups, function (key, val) {
    self.MachineGroups.push(
        {
            "Index": key,
            "MachineGroupId": val.MachineGroupId,
            "MachineGroupName": val.MachineGroupName + val.ClientName,
            "ClientName": val.ClientName,
            "Machines": val.Machines,
            "hrefAttr": "#collapse_3_" + key,
            "idAttr": "collapse_3_" + key
        });
});

self.FindMachineData = function (data, event) {
    alert("Aaaa");
}

那么这是我调用淘汰赛绑定的html：

div class="col-xs-12" data-bind="foreach: MachineGroups">
            <div class="vastable togglesetup" data-bind="attr:{Id : 'machine-'+ idAttr}">
                <div class="tablename accordion-toggle collapsed" data-toggle="collapse" data-bind="text : MachineGroupName, attr:{ href :  hrefAttr}"></div>
                <div class="panel-collapse collapse" data-bind="attr: { id : idAttr }">
                    <div class="row">
                        <div class="col-xs-12">
                            <!--ko ifnot: $parent.LogedInUserTypeId() == 1 || $parent.LogedInUserTypeId() == 2-->
                            <!--ko if: $parent.AuthenticateToRegisterNewMachine-->
                            <div class="tablemenubar">
                                <div class="btn btn-sm cyanoutline" data-toggle="modal" data-target="#edit"
                                     data-bind="click: $parent.RegisterNewMachine">Register New Machine</div>
                            </div>
                            <!--/ko-->
                            <!--/ko-->
                        </div>
                    </div>
                    <table class="table table-foo">
                        <thead>
                            <tr>
                                <th>Machine Name</th>
                                <th data-breakpoints="xs sm">Location</th>
                                <th data-breakpoints="xs sm">Last Detection</th>
                                <th>Machine Status</th>
                                <th>Expiry Date</th>
                                <th data-breakpoints="xs">Action</th>
                            </tr>

                        </thead>
                        <tbody data-bind="foreach : $data.Machines">
                            <tr>
                                <td data-bind="text : MachineName"></td>
                                <td data-bind="text : MachineLocation"> </td>
                                <td data-bind="text : LastDetectionTime"></td>
                                <td data-bind="attr:{id : MachineKey}">
                                    <!--ko if: MachineStatusId == 1-->
                                    <div class="status label-greenbg">Active</div>
                                    <!-- /ko -->
                                    <!--ko if: MachineStatusId == 2-->
                                    <div class="status label-redbg">Inactive</div>
                                    <!-- /ko -->
                                    <!--ko if: MachineStatusId == 3-->
                                    <div class="status label-darkgreybg">No Detection</div>
                                    <!-- /ko -->
                                </td>
                                <td style="color:red; font-weight:bold;" data-bind="text : ExpiryDate"></td>


                                <td class="freecell">
                                    <p data-bind="text: console.log($root, $parent, $data)"></p>
                                    <!--ko ifnot: $root.LogedInUserTypeId == 1 || $root.LogedInUserTypeId == 2-->
                                        <!--ko if: $root.AuthenticateToEditMachine-->
                                            <button data-toggle="modal" href="#edit" class="btn cyan btn-sm" data-bind="click: $root.FindMachineData">Edit</button>
                                        <!--/ko-->
                                    <!--/ko-->
                                    <button data-toggle="modal" href="#detail" class="btn med-turquoise btn-sm" data-bind="click : $root.FindMachineDetail">Detail</button>
                                </td>
                            </tr>
                    </table>
                </div>
            </div>
        </div>

问题是，当我尝试访问根视图模型上的点击功能时，点击事件不起作用。

有人可以帮我吗？

更新：我将 sn-p 更改为完整的 html 代码。这就是我调用 KO 函数的方式。我不明白为什么我不能执行点击事件

【问题讨论】：

点击按钮有没有报错？
不，没有错。没有错误信息
我猜这只是代码的一部分，但是在这个 sn-p 中你忘记了 applyBindings？我创建了一个 JSFiddle，它对我有用：jsfiddle.net/tex59fej/1
实际上我使用了 KO 和 asp.net Mvc 并且我在 Cshtml 文件上应用了 KO 绑定

标签： knockout.js knockout-2.0 knockout-mvc

【解决方案1】：

我终于得到了解决方案。问题发生是因为我将淘汰赛 Js 与 Foo-table 插件结合使用。所以DOM被foo-table重置了。我删除了 foo 表，问题消失了。

谢谢

【讨论】：