Предотвращения двойного щелчка события (кнопка + строка) с нокаутом

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 срабатывает (ОК), но и событие goToVehicle срабатывает (нок).

Как я могу избежать события щелчка в строке при нажатии кнопки удаления?

Спасибо.

---

UPDATE

Вот это событие называется за deleteVehicle:

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

Как вы можете видеть, первый я сделать вызов Ajax, чтобы удалить элемент. Затем я принудительно перезаряжаю сетку. Если я использую обработчик события clickBubble, он выполняет мой вызов ajax в моей функции deleteVehicle, но не выполняет location.hash = vehicle.Category;. Так моя сетка не освежена ???

Answer 1

Вы можете использовать привязку clickBubble на кнопке. Это предотвратит событие прорывается к тру:

<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

Ваш код должен work.I не имеет ни малейшего представления, почему это не working.May быть вы можете скрипку, чтобы мы могли понять, что проблема заключается в том, что.

Это также работает, как ожидалось:

Добавить идентификатор в строке таблицы и кнопки

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