避免與淘汰賽

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）。

如何避免單擊刪除按鈕時行上的單擊事件？

謝謝。

---

UPDATE

這裏是被稱爲背後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

您的代碼應該幹活沒有任何想法，爲什麼它不working.May是你可以小提琴使我們能圖什麼問題是。

這也作爲你的預期：

添加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 
} 
});