CODEWITHSUNDEEP
jqueryknockout.js
jaffa
jaffa

Reputation: 27350

How do I use event.preventDefault with KnockoutJs click event handlers?

I have the following table row as a script template in KnockoutJs:

    <script id="inboxTemplate" type="text/html">           
    <tr data-bind="click: function() { viewInboxModel.selectAction($data); }">                                 
        <td>...</td>                 
        <td>${ CreateDate }</td>               
        <td data-bind="click: function(e){ e.preventDefault();viewInboxModel.clearAction($data); }"><img src="/Content/images/delete.png" height="16px" width="16px"> </td>
    </tr>            
    </script>

The problem is when I click the delete button, it is also running the selectAction() method. I've tried using e.preventDefault() in both selectAction click handler and the clearAction() clicker handler to no avail. Is there anyway KnockoutJs can prevent the underlying row from now being clicked if the delete button is clicked?

Upvotes: 25

Views: 17960

Answers (2)

Matt Shepherd
Matt Shepherd

Reputation: 803

As per @Benoit Drapeau's comment:

In more recent versions of Knockout you use clickBubble: false. e.g.

<td data-bind="click: myFunction, clickBubble: false"> </td>

http://knockoutjs.com/documentation/click-binding.html

Upvotes: 11

RP Niemeyer
RP Niemeyer

Reputation: 114792

If you have jQuery referenced, then you can safely call e.stopImmediatePropagation(); in your handler, as it is passed the jQuery event object. If you are not using jQuery, then you could still do something like: 

e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

http://jsfiddle.net/rniemeyer/mCxjz/

Upvotes: 27

Related Questions