Многопользовательские неполадки с нокаутом

Question

В настоящее время я пытаюсь создать пользовательскую привязку для своей веб-страницы, где у меня есть видимый диапазон и скрытый элемент ввода. Если я нажму на диапазон, он исчезнет, ​​и появится сообщение. Как только вход теряет фокус, диапазон обновляется с новым значением от входа. Однако по какой-то причине моя функция blur связывается снова каждый раз, когда я нажимаю мой диапазон, чего я не хочу. Как я могу это исправить?

HTML

<!-- ko foreach: formula --> 
    <span data-bind="text: $data, attr: {name: $index}, convert: $index()"></span> 
    <input data-bind="value: $data, attr: {name: $index}" class="hide"/><br/> 
<!-- /ko --> 

JavaScript

ko.bindingHandlers.convert = { 
    init: function(element, valueAccessor) { 
    $(element).click(function() { 
     var index = valueAccessor(); 
     var inputName = "input[name="+index+"]"; 
     $(element).addClass("hide"); 
     $(inputName).removeClass("hide").focus().blur(function() { 
     console.log("firing"); 
     $(inputName).addClass("hide"); 
     $(element).removeClass("hide"); 
     $(element).text($(inputName).val()); 
     }); 
    }); 
    } 
}; 

Так что, если я нажимаю на моем пролете в два раза, я хотел бы получить

firing 
firing 
firing 

в моей консоли, когда я только должен получить firing дважды.

Примечание: Я не могу следовать примеру hasFocus из учебника по нокауту, поскольку он связывается со всеми полями ввода, и мне нужно, чтобы поля ввода переключались только для этого конкретного шага, который нажал.

Answer 1

Это не тайна вообще. Посмотрите на этот код:

$(element).click(function() { 
    /* some code */ 
    $(inputName).blur(function() { 
     /* some code */ 
    }); 
}); 

Каждый раз, когда вы щелкните добавить blur обработчик. Вы можете попробовать удалить обработчики следующим образом:

$(element).click(function() { 
    var $element = $(this); 
    var index = valueAccessor(); 
    var inputName = "input[name="+index+"]"; 
    var $input = $(inputName); 
    $element.addClass("hide"); 
    $input.unbind('blur'); 
    $inputName.removeClass("hide").focus().blur(function() { 
     console.log("firing"); 
     $input.addClass("hide"); 
     $element.removeClass("hide"); 
     $element.text($input.val()); 
    }); 
}); 

Я думаю, вы можете его цепью, но не проверяли.