jquery - knockout click event is canceled by focusout event -

i have form input tag , "x" button clean input value. button should hidden when input doesn't have focus, have focusout event hide when input out of focus. when user clicks on "x" button - goes first focusout event , click event of button not called.

here html:

 <input type="text" id="entityname" data-bind="value: name" maxlength="100"     name="name" />  <span class="cleartexticon" data-bind="click:$root.cleartext"></span> 

here code

this.cleartext = function (o, e){                 $(e.target).prev().val('');             };              $('body').on('focusout', 'input', function(e){                     $(this).siblings('.cleartexticon').hide();              }); 

you don't need jquery stuff @ all. use visible binding handler:

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

see updated fiddle.