Blur event stops click event

Question

Sample code: http://jsfiddle.net/slolife/PnmxM/

I ask about this, although there are a number of similar questions, but I feel that they do not match.

I have a text box that, when it is blurry, should do something.

I also have a link that is always visible (other questions seem to differ), and when clicked - do something.

My blur handler fires, but the click handler does not work.

Is there any way to handle this?

Update

Many people indicated that the warnings caused my problem. Thanks. In my real code, I have no warnings, but instead remove the text box from the DOM.

So, I updated the script to better reflect this with console.log calls instead of alert () calls. Any further help is appreciated.

Answer 1

This is because the first alert breaks the second alert because it is modal. See this:

• http://jsfiddle.net/PnmxM/4/

Here I add a message to the msgs div and it works as expected.

For your updated jsFiddle, here (updated-updated?) Working:

• http://jsfiddle.net/PnmxM/10/

You remove the input window in onBlur and, as a result, move the Add item vertically, so the click does not happen on the Add item anymore (because the mouse cursor did not move in the meantime), but on some other element (in this case sample jsFiddle container). Moving the Add item over the disappearing input element solves the "click me if you can" problem.

Answer 2

The click event does not fire because it only happens when the mouse button is released. This does not happen because there is a modal dialog box (warning window). If you change the alerts to console.log and then it will work fine ...

http://jsfiddle.net/PnmxM/7/

Answer 3

Since you use alert , you abort, which creates a problem for me in Firefox, but if you switch to console.log and make sure you have a console (like Firebug), you can see both events shoot.

 function onBlur() { console.log('blur'); } function addItem() { console.log('add'); } $(document).ready(function() { $('#items').delegate('input','blur', onBlur); $('#addItem').click(addItem); }); 

Answer 4

Depending on your requirements, another way to fix this if you cannot change your user interface is to simply attach to the mousedown event instead of click . I added my own modification to console.log () jsFiddle for demonstration.

I ran into this problem with a menu that showed when the user focuses on the text field and hides when they blur. The menu clicks didn’t shoot in Chrome because the blur hid the menu in mousedown, so when the mouse returned, the pointer was no longer on the menu (because it disappeared), since this handler then received a call before the blur hides the menu, and mine click events will reach the goal.

Answer 5

Just try updating the script http://jsfiddle.net/slolife/PnmxM/ .

Update the onBlur function to this.

Blur and click will work.

  function onBlur() { console.log('blur'); $('#item').val("test"); } 

Current problem: the click does not start because the ui “Add item” position changes (as the text box disappears).