淘汰点击事件被focusout事件取消

Question

我有一个带有输入标签和“X”按钮的表单来清理输入值。 当输入没有焦点时，这个按钮应该被隐藏，所以当输入没有焦点时，我有一个 focusout 事件来隐藏它。但是当用户点击“X”按钮时 - 它首先进入 focusout 事件并且不会调用该按钮的点击事件。

这是我的html：

 <input type="text" id="entityName" data-bind="value: name" maxlength="100"     name="name" />
 <span class="clearTextIcon" data-bind="click:$root.clearText"></span>

这是我的代码

this.clearText = function (o, e){
                $(e.target).prev().val('');
            };

            $('body').on('focusout', 'input', function(e){
                    $(this).siblings('.clearTextIcon').hide();

            });

Answer 1

你根本不需要这些 jQuery 的东西。只需使用visible 绑定处理程序：

HTML：

<input type="text" data-bind="value: name,
                              valueUpdate: 'input',
                              hasFocus: name.editing" />

<span data-bind="event: { mousedown: $root.clearText },
                 visible: name() && name.editing()">X</span>

JavaScript：

var viewModel = function(){
    var self = this;

    this.clearText = function(){
        self.name('');
    };

    this.name = ko.observable('');
    this.name.editing = ko.observable(false);
}

ko.applyBindings(new viewModel());

见Updated Fiddle。