Question

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

这是我的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。

聚焦事件取消了淘汰赛点击事件

1 个答案: