CODEWITHSUNDEEP
javascriptknockout.js
zeristor
zeristor

Reputation: 429

Click event hijacked by jQuery instead of knockout

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?

Upvotes: 0

Views: 485

Answers (2)

zeristor
zeristor

Reputation: 429

If I replaced

click: $root.goToItem

with 

click: goToItem

it works again.

It seems the jQuery event firing was a red herring, I compared it to a working system and it started off in jQuery. I had to brush up on my DOM debugging, which is no bad thing.

Is the $root superflous, it took someone else to point this out to me. I was sure that in a foreach loop you could only access the $root functions via $root.

Upvotes: 0

Pylyp Lebediev
Pylyp Lebediev

Reputation: 2121

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

Upvotes: 1

Related Questions