Knockout JS blur event binding occurs 2 times

36 views Asked by At

I have this simple input

<div class="input-group" data-bind="attr:{id: 'date-rec-datepicker-calendar-' + invoiceId()}, liveEditor: value">    
<input class="edit form-control" type="text" 
           data-bind="attr:{id: 'date-rec-editor-' + invoiceId()}, 
           value: value,
           hasFocus: value.editing, 
           event: { blur: value.stopEditing }" />
</div>

and this KO extender

this.value = ko.observable();
ko.extenders.liveEditor = function (target) {
            target.editing = ko.observable(false);
            target.edit = function () {
                target.editing(true);
            };
            target.stopEditing = function () {
                target.editing(false);
            };
            return target;
        };

ko.bindingHandlers.liveEditor = {
            init: function (element, valueAccessor) {
                var observable = valueAccessor();
                observable.extend({ liveEditor: this });
            },
            update: function (element, valueAccessor) {
                var observable = valueAccessor();
                ko.bindingHandlers.css.update(element, function () { return { editing: observable.editing }; });
            }
        };

I have no clue why, after focusing the input, when I click outside the input, the blur event attached function is triggered two times, so the stopEditing function is hit 2 times. I saw this problem is very common with the blur event.

0

There are 0 answers