2

I'm currently working on an input text with values proposals, this is the html :

<div>
   <input type="text"/>
   <ul>
      <li>Value 1</li>
      <li>Value 2</li>
      <li>Value 3</li>
   </ul>
</div>

And with jQuery I have bind 2 events :

// On click on proposal, change the input value
$('li').click(function(){
   $('input').val($(this).text());
}); 

// On input blur, close proposal
$('input').blur(function(){
   $('ul').hide();
});

But now, I have a big problem.. When I click on li, the first event launch are the input blur, so the ul are hided and the click event are never been called..

I have read some solution (like this one) but in my case, the blue event hide the click zone, so my second event can't be called.

How can I do to manage this conflict ?!

Community
  • 1
  • 1
Arthur
  • 4,870
  • 3
  • 32
  • 57
  • The "duplicate solution" doesn't help me. If the blur event are called before the click event, the mousedownHappened boolean will be false. So, the blur event will not be canceled. In my case, the blur hide the click zone, so my second event are never called :( – Arthur Aug 29 '14 at 21:16
  • 1
    Add the mousedown event in conjunction with your click event handler or simply replace it altogether. – Preston S Aug 29 '14 at 21:19
  • I've tried another way using `mouseover` and `mouseout`. So you'll always see the list if `input` is focused: [fiddle](http://jsfiddle.net/s759n1k6/) – Sebastian Homeier Aug 29 '14 at 21:21
  • This is another possiblity: http://stackoverflow.com/questions/11544554/get-the-clicked-object-that-triggered-jquery-blur-event If the new target is your li, [cancel the blur event](http://stackoverflow.com/questions/13509484/can-i-prevent-blur-event-from-happening). – Preston S Aug 29 '14 at 21:22
  • 1
    @Arthur, this is how it's done: http://jsfiddle.net/18Lo5vyq/3/ – Preston S Aug 29 '14 at 21:43

0 Answers0