Question

我有以下敲除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）。

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

感谢。

更新

这是在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;。所以我的网格没有刷新???

Answer 1

您可以在按钮上使用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>

Answer 2

你的代码应该有效。我不知道为什么它不起作用。可能你可以小提琴，以便我们可以弄清楚那是什么问题。

这也可以按预期工作：

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

通过淘汰避免双击事件（按钮+行）

2 个答案: