Geek asks and answers

Jquery click event doesn't fire when using knockout

According to the documentation for binding to a knockout labeled “Note 3” , “Knockout” prevents the click from executing the default event. To cancel 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 bind the click event to a button, like this:

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

Note that I am returning true from a function. This even handler never fires. How can I do this job?

+5
source share
4 answers

, , , . , jquery:

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

, , jQuery $('.some-class'). , , #btnParse . , , , , . . ( ) , DOM, document, - id #btnParse:

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

, , , click, . , id, - , .

, , , . , , , , , :

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

, Javascript, (this), :

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

, . !

+7

, DOM, . , <div>. , , , . , div :

<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>

script :

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

, <div> , DOM (, foreach ..), , , #btnContainer <button>, .

+1

, jQuery, . , . , mnagic , , , , , .

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 );
    };//*/
}//*/

,

0

, , viewmodel, .

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

-1
source

More articles:


All Articles