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 に答える