jQuery: fire click() before blur() event
click, jquery, onblur
Solution
Solution 1
Listen to `mousedown` instead of `click`.
The `mousedown` and `blur` events occur one after another when you press the mouse button, but `click` only occurs when you release it.
Solution 2
You can `preventDefault()` in `mousedown` to block the dropdown from stealing focus. The slight advantage is that the value will be selected when the mouse button is released, which is how native select components work. JSFiddle
$('input').on('focus', function() {
$('ul').show();
}).on('blur', function() {
$('ul').hide();
});
$('ul').on('mousedown', function(event) {
event.preventDefault();
}).on('click', 'li', function() {
$('input').val(this.textContent).blur();
});
Problem
I have an input field, where I try to make autocomplete suggestion. Code looks like ``` <input type="text" id="myinput"> <div id="myresults"></div> ``` On input's `blur()` event I want to hide results' div: ``` $("#myinput").live('blur',function(){ $("#myresults").hide(); }); ``` When I write something into my input I send request to server and get json response, parse it into ul->li structure and put this ul to my `#myresults` div. When I click to this parsed li element I want to set value from li to input and hide `#myresults` div ``` $("#myresults ul li").live('click',function(){ $("#myinput").val($(this).html()); $("#myresults").hide(); }); ``` Everything is going good, but when I click to my li `blur()` event fires before `click()` and input's value don't get li's html. How can I set up `click()` event before `blur()`?