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

我认为你可以把它链起来，但不测试它。

Knockout自定义绑定多次触发

1 个答案: