1

我目前正在尝试为我的网页创建一个自定义绑定，其中我有一个可见的跨度和隐藏的输入元素。如果我要单击跨度，它将消失并出现输入。一旦输入失去焦点，跨度将使用输入中的新值进行更新。但是，由于某种原因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两次。

注意：我无法遵循hasFocusKnockout 教程中的示例，因为它绑定到所有输入字段，并且我需要我的输入字段仅针对正在单击的特定范围进行切换。

4

1 回答 1

3

这根本不是什么谜。看那个代码：

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

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

于 2012-06-12T09:04:43.027 回答