敲除自定義綁定多次觸發

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兩次。

注意：我無法遵循Knockout教程中的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()); 
    }); 
}); 

我認爲你可以鏈接它，但沒有測試它。