StrugglingCoder StrugglingCoder - 2 months ago 15
jQuery Question

e.stopPropagation() is not a function in Knockout JS

I have a table where there are two things :

Click event on the row level

and click while checking a check box inside that row.

And when , checkbox is checked I do not want the Click event on tr to be fired.

<tbody data-bind="foreach:CustomerList">
<tr onclick="removepage();" onmouseover="changeRowColor(this)" onmouseout="restoreRowColor(this)">

<td>
<input class="checkbox" data-bind="click:$parent.customerClick(event)" type="checkbox">

</td>
<td class="col-md-4">
<span class="name" data-bind="text:customerName" />

</td>
<td>
<span data-bind="text:siteName" />
</td>

</tr>
</tbody>


Now in customerClick() ; I tried to achieve the same.

customerClick: function (e) {
debugger;
e.stopPropagation();
},


But it did not work.

It says ,
e.stopPropagation();
is not a function also.

Please tell me how to do that .

Answer

Knockout comes with a binding for such an occasion - clickBubble:

<input class="checkbox" data-bind="click:$parent.customerClick(event), clickBubble: false" type="checkbox">

Setting it to false on your input will prevent the click event from reaching the handlers further up the tree.