JQuery onBlur event not firing

Question

This question seems elementary but it doesn't matter what I do ( based on the various posts on SOV I went through ) I just cannot get this event to fire in my Devextreme app

The premise... All I want to do is to update an existing variable's value with the text that was entered. The value of the variable gets carried over from another page. I need to update the variable's value from the text that was written into a textbox. This is all I want to do.

Here is my html code:

<div class="dx-field-label">Code: </div>
    <div class="dx-field-value" id="txtCode" data-bind="dxTextBox: { value: CustomerCode, placeholder: 'Enter Code', showClearButton: true }"></div>
</div>

Here is my JS code :

var viewModel = {
    // CustomerID: params.CustomerID,
    // CustomerName: ko.observable(params.CustomerName),
    //CustomerEmail: ko.observable(params.CustomerEmail),
    // CustomerID: ko.observable(params.CustomerID),

    Continue: function () {
        alert('Saved'); 
    },
    CustomerID: CustomerID,
    CustomerName: CustomerName,
    CustomerCode: CustomerCode,
    CustomerEmail: CustomerEmail,
    AddCustomer: AddCustomer,

    //Add Customer
};

$('#txtCode').on('blur', 'txtCode', function () {
    CustomerCode = $("#txtCode").dxTextBox('option', 'value');      
    console.log(CustomerCode);
});

Any advice would be appreciated

EDIT

OK, I have now done this:

 CustomerID;
CustomerName.trim();
CustomerCode.trim();
CustomerEmail.trim();



ko.applyBindings({
ChangedCustomerCode: ko.observable(),
CodeFocusOut: function(e){
    ChangedCustomerCode: value;
    console.log(value);
    console.log(ChangedCustomerCode);
    CustomerCode: ChangedCustomerCode;
    console.log(CustomerCode);
}

});

var viewModel = {

    Continue: function () {
        alert('Saved');

    },



    CustomerID: CustomerID,
    CustomerName: CustomerName,
    CustomerCode: CustomerCode,
    CustomerEmail: CustomerEmail,
    AddCustomer: AddCustomer,


};


return viewModel;
};

But it tells me that I cannot apply bindings to the same elemenet multiple times. What should I do?

Answer 1

You try to handle the blur event on the 'div' element( id="txtCode" ). But focus state of this element is not changed, so the blur event does not fire.

Actually, if you use knockoutjs, you should not handle the blur event manually. Just use ko.observables:

<div data-bind="dxTextBox: { value: myValue, onValueChanged: valueChanged }"></div>

ko.applyBindings({
    myValue: ko.observable(),
    valueChanged: function(e){
        alert(e.value);
    }
});

See this fiddle - http://jsfiddle.net/0284uz1f/2/

Answer 2

Use event binding like so:

$('.txtCode').on('blur', function ($this) {
    // Code.
}

Answer 3

try this

$('body').on('blur', '#txtCode', function () {
     CustomerCode = $("#txtCode").dxTextBox('option', 'value');

console.log(CustomerCode);
});