Click event hijacked by jQuery instead of knockout

Question

I'm using the Knockout webmail tutorial as a template for a Single Page Application I'm working on.

However I'm having trouble implementing the click binder, I've had this sort of thing working before but his time the click events are being hijacked.

My view model has a function:

var self = this;
self.goToItem = function(item) { location.hash = "#/Item/" + item.id };

which is standard.

<h2>Saved Items</h2>
<div data-bind="foreach: savedItems">
  <div data-bind="click: $root.goToItem">
    <p data-bind="text: name"></p>
  </div>
</div>

I've tried the:

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

but, tellingly, this came back empty although the foreach has data to loop over.

The problem now is that the mousevent click is now caught by jQuery, I haven't had to delve into this before, but I am sure knockout runs without jQuery. At the moment the only jQuery I use is for the Ajax calls.

So where do I go to inspect the events on DOM objects, preferably in Chrome?

How can jQuery butt in?

Your question is very unclear... what do you mean on "click events are being hijacked"? What happens or what does happen on your click? — nemesv
The event is registered with the click binding. However, when the event is triggered, and monitored with an event breakpoint, it is processed in jQuery. Which I found startling. — zeristor

Pylyp Lebediev Pylyp Lebediev · Accepted Answer · 2014-01-17T20:05:20

Have you tried to use clickBubble binding?

Preventing the event from bubbling

By default, Knockout will allow the click event to continue to bubble up to any higher level event handlers. For example, if your element and a parent of that element are both handling the click event, then the click handler for both elements will be triggered. If necessary, you can prevent the event from bubbling by including an additional binding that is named clickBubble and passing false to it, as in this example:

<div data-bind="click: myDivHandler">
    <button data-bind="click: myButtonHandler, clickBubble: false">
        Click me
    </button>
</div>

Normally, in this case myButtonHandler would be called first, then the click event would bubble up to myDivHandler. However, the clickBubble binding that we added with a value of false prevents the event from making it past myButtonHandler.

More details about click binding is here http://knockoutjs.com/documentation/click-binding.html

Click event hijacked by jQuery instead of knockout

2 Answers