0

我有以下淘汰赛html代码：

<table class="vehicles" data-bind="with: chosenCategoryData">
    <tbody data-bind="foreach: Vehicles">
        <tr data-bind="click: $root.goToVehicle">
            <td data-bind="text: Brand"></td>
            <td data-bind="text: Model"></td>
            <td data-bind="text: Registration"></td>
            <td><button data-bind="click: $root.deleteVehicle">Delete</button></td>
        </tr>     
    </tbody>
</table>

单击任何行，将导航到详细信息页面。

单击删除按钮将删除该行上的元素。

此删除按钮位于最后一列。

这里的问题是，当我单击删除按钮时，触发了名为 deleteVehicle 的淘汰赛事件（ok），但也触发了 goToVehicle 事件（nok）。

单击删除按钮时，如何避免行上的单击事件？

谢谢。

更新

这是在 deleteVehicle 后面调用的事件：

self.deleteVehicle = function (vehicle)
{
    $.ajax({ url: "/api/vehicle?id=" + vehicle.VehicleId, type: "DELETE" });
    location.hash = vehicle.Category;
}

如您所见，首先我执行 ajax 调用来删除元素。接下来我强制重新加载我的网格。如果我使用clickBubble事件处理程序，它会在我的 deleteVehicle 函数中执行我的 ajax 调用，但不会执行location.hash = vehicle.Category;。所以我的网格没有刷新？？？

4

2 回答 2

0

您的代码应该可以工作。我不知道它为什么不工作。也许您可以摆弄一下，以便我们弄清楚那是什么问题。

这也可以按您的预期工作：

将 id 添加到表格行和按钮

eg;)  <tr id ="tableRow" data-bind="click: $root.goToVehicle">
        <td data-bind="text: Brand"></td>
        <td data-bind="text: Model"></td>
        <td data-bind="text: Registration"></td>
        <td><button id="deleteBtn" data-bind="click: $root.deleteVehicle">Delete</button></td>
      </tr>

如下更改您的 goToVehicle 方法：-

self.goToVehicle = function(data,event){
 if ( !$(event.target).is('deleteBtn') ) {  
    alert('clicked');  
    //some code here
 }  
});
于 2013-03-05T11:14:42.023 回答
0

您可以clickBubble在按钮上使用绑定。它将防止事件冒泡到 tr：

<table class="vehicles" data-bind="with: chosenCategoryData">
    <tbody data-bind="foreach: Vehicles">
        <tr data-bind="click: $root.goToVehicle">
            <td data-bind="text: Brand"></td>
            <td data-bind="text: Model"></td>
            <td data-bind="text: Registration"></td>
            <td><button data-bind="click: $root.deleteVehicle, clickBubble: false">Delete</button></td>
        </tr>     
    </tbody>
</table>
于 2013-03-05T10:33:38.250 回答