淘汰赛自定义绑定多次触发

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());
      });
    });
  }
};

所以如果我点击我的 span 两次，我会得到 ​​p>

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());
    });
});

我认为你可以链接它，但没有测试它。