jquery click event not firing when using knockout
jquery, knockout.js
Solution
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!
Problem
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?