KnockoutJs data-bind doesn't work with jquery click event on Internet Explorer(8-11)

Question

I would like to do basic search event with KnockoutJS.

The button is bound with KnockoutJs to filter records. I am trying to trigger button's click event when user click enter button.It is working on Chrome and Firfox well.It also works on IE if I click button manually.

Problem is when I press enter key on keyboard, it doesn't filter(pass data to viewModel) on IE.I tracked my viewModel. I see that if i press enter key it send previous data to viewModel,like:

Text Box Input value:30 -> click event triggered -> data on the viewmodel: null
Text Box Input value:20 -> click event triggered -> data on the viewmodel: 30(previous data)
Text Box Input value:10 -> click event triggered -> data on the viewmodel: 20(previous data)

     <button type="button" id="btnSearch" data-bind="click: filter" , class="btn btn-              primary btn-large" ></i>Filter</button>

Js:

$(document).ready(function () {
    $("#txtSearchText").keyup(function (event) {
        var evt = event || window.event;

        if (evt.keyCode == 13) {
            alert(evt.keyCode);
            $("#btnSearch").click();


        }
    });

});

MyViewModel:

var ListCasesViewModel = function () {
var self = this;

self.selectedStartDate = ko.observable(null);
self.selectedEndDate = ko.observable(new Date());
self.selectedSearchKey = ko.observable("");
self.selectedStatuses = ko.observableArray();
self.selectedHospitals = ko.observableArray();

// methods...
this.init = function () {
    self.selectedEndDate(new Date());
    self.filter();

}

this.filter = function () {

    // get filter control values
    var startDate = self.selectedStartDate(); // dtStart.value();
    var endDate = self.selectedEndDate(); //dtEnd.value();
    var searchText = self.selectedSearchKey(); //txtSearchText.val();
    var lstStatus = $("#lstStatus").data("kendoMultiSelect");
    var lstHospital = $("#lstHospitals").data("kendoMultiSelect");
    var status = lstStatus.value().toString();
    var hospitalIDs = lstHospital.value().toString();


    // prepare filters
    $filter = new Array();

    if (startDate != undefined)
        $filter.push({ field: "startDate", operator: "eq", value: startDate });

    if (endDate != undefined)
        $filter.push({ field: "endDate", operator: "eq", value: endDate });

    if (status != undefined)
        $filter.push({ field: "caseStatus", operator: "eq", value: status });

    if (hospitalIDs != undefined)
        $filter.push({ field: "hospitalIDs", operator: "eq", value: hospitalIDs });

    if (searchText != undefined)
        $filter.push({ field: "searchText", operator: "eq", value: searchText });


    var list = $("#listView").data("kendoListView");
    list.dataSource.filter($filter);

}};

Does the keyup event get fired when you press Enter in IE? Which Jquery version are you using? — opp
Yes ,keyup event is fired and i can see the value of keycode on popup. — balron

John Lucas John Lucas · Accepted Answer · 2014-01-16T11:19:17

Add the valueUpdate binding to your searchText input:

<input id="txtSearchText" type="text" data-bind="value:selectedSearchKey,valueUpdate:'afterkeydown'"/>

This forces knockout to update the value of the observable as soon as a user types a letter.

Knockout "value" binding

KnockoutJs data-bind doesn't work with jquery click event on Internet Explorer(8-11)

1 Answers