jquery click event not firing when using knockout

6
votes

According to knockout click binding documentation's "Note 3", Knockout prevents click event from performing default function. To override this behavior, all I have to do is return true from my handler function. So, I have this markup:

<div data-bind="visible:Pages().length == 0">
    <div class="alert alert-info">Click "Parse" button.</div>
    <button class="btn" id="btnParse" title="Parse Tabs">Parse</button>
</div>

Now, I want to attach a click event to the button like this:

$(function () {       
    $('#btnParse').on('click', function () { alert('clicked'); return true;});
});

Note that I'm returning true from the function. This even handler never fires. How can I make this work?

4
jqueryknockout.js
Why not add the click function via knockouts click binding? - Kyeotic
Yes, I can, and indeed it works. However, I feel that using data-bind should be reserved for something that is actually related to the view model. If I want to manipulate elements on my page further, I shouldn't rely on knockout to do so. I am also annoyed that a simple setup as this doesn't work when it should. - Alex Polkhovsky
Well the note you are pointing to is for databind click functions, its not talking about jquery clicks. - Kyeotic
I tested your exact code in a fiddle, and it works fine. You must be doing something else to break it: jsfiddle.net/tyrsius/YCDt4 - Kyeotic
I'm not sure that's a valid test. There is no model and knockout is not being used. As straight html/jquery combination, this works just fine. Playing with the code, I can change any attribute value for the button. I just can't make it fire the click event. Your previous comment made me try binding click to a function that just returns true in order to entice knockout to let me fire an event. That didn't help. - Alex Polkhovsky

4 Answers

8
votes

The reason your click handler is never firing is because it's never applied to your element. So when you do this in jquery:

$('.some-class').on('some-event', someFunction);

Then for the handler to be bound to that event, first jQuery has to find your $('.some-class') selector. In your case, most likely #btnParse is not yet rendered to the page by knockout when you bind the event. Or, also possible, that original element is rendered, destroyed, and then another element is rendered. In this second scenario, the event handler wouldn't remain on the button. One alternative (which I don't recommend) is to bind the handler higher up in the DOM, like at the document level, and filter events to only those of something with an id #btnParse:

$(document).on('click', '#btnParse', function () { console.log('hi'); });

The reason I don't recommend that is because it's bad knockout practice, you should be using the click binding as some other posts suggested. Also, you're using an id attribute and that's really not a good idea in general for templated dynamic content - just use classes unless you absolutely need an id for a unique static element.

As for how to properly use knockout's click binding, the one tricky thing is that you'll need to understand how knockout does scoping. If, for example, you're binding a click inside a loop, and you want the handler from your main view model, you have to reference the parent scope because the loop changes your context:

<!-- ko foreach: someCollection -->
    <a data-bind="click: $parent.someFunction"></a>
<!-- /ko -->

Furthermore, if you need to change the Javascript context that your handler executes with (the this), then you need to bind the click handler like this:

<!-- ko foreach: someCollection -->
    <a data-bind="click: $parent.someFunction.bind($parent)"></a>
<!-- /ko -->

Play with that stuff a bit and ask a new question if you're still confused. Good luck!

1
votes

I think the problem has to do with knockout's modification of the DOM where you are trying to bind the event. To get around this, try assigning the click function to the parent<div>element. When assigning the click handler, use the overload with a selector to specify that you want to handle the click only when the contained button is clicked. For example, change div like this:

<div id="btnContainer" data-bind="visible:Pages().length == 0">
    <div class="alert alert-info">Click "Parse" button.</div>
    <button class="btn" id="btnParse" title="Parse Tabs">Parse</button>
</div>

And then change your script to:

$(function () {       
    $('#btnContainer').on('click', '#btnParse', function () { alert('clicked');});
});

Note that if this<div>is contained within another logical block that modifies the DOM, (a template, foreach loop, etc), you'll probably need to set the#btnContainertag to the first ancestor of the<button>that is not part of such a logical block.

0
votes

In my situation I was working with a observableArray that need some jQuery magic applied to each item in that array. I was having some issues with the custom binding not wanting to take two varibles from each item in that array. So, in my packaging I added some of that dark mnagic to an non observable item as an function so that when the name was cliked, then the map I was working on would move to that location.

HTML:

<ul data-bind="foreach: filteredItems">
    <li class="seat">
        <span class="name" data-bind="text:fullName, click: toggleEmp"></span>
    </li>
</ul>

CODE:

function viewModel() {
    var vm = this;
    vm.empData = function(data) {
        var emp = this;
        emp.office_x_loc = ko.observable(data.xLoc);
        emp.office_y_loc = ko.observable(data.yLoc);
        emp.toggleEmp = function () {
            jQuery('#skyLineMap').lhpMegaImgViewer( 'setPosition', emp.office_x_loc(),emp.office_y_loc(), 0.8, false );
    };//*/
}//*/

I hope this helps

-1
votes

The note you refer to for the click binding refers to method in your viewmodel, not to your custom click handler.

In other words, if you have a data-bind="click: doSomething" in the <button> element, the doSomething() method in your viewmodel should return true if you want it to execute your custom handler.