单击"视图模型不起作用$root的事件"

Question

我尝试使用带有挖空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>

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

有人可以帮助我吗？

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

Answer 1

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

谢谢