Blur event stops click event

Question

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

I am asking this even though there are a number of similar questions, but I feel that they are not the same.

I have an textbox that when it is blurred, should do something.

I also have a link, that is always visible (that appears to be how the other questions differ) and when clicked, should do something.

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

Is there a proper way to deal with this?

Update

Many people pointed out that the alerts were causing my problem. Thank you. In my real code, I do not have alerts, but instead remove the textbox from the DOM.

So I have updated the fiddle to better reflect that with console.log calls instead of alert() calls. Any additional help is appreciated.

Answer 1

This is because of the first alert breaking the second alert because it's modal. See this:

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

Here, I'm appending the message to msgs div and it works as expected.

For your updated jsFiddle, here's an (updated-updated?) working one:

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

You are removing the input box in your onBlur and, as a consequence of that, moving the Add item vertically, thus the click doesn't happen on Add item anymore (as your mouse pointer did not move in the meantime), but on some other element (in this case, a jsFiddle example container). Moving Add item above the disappearing input element solves the "click me if you can" issue.

Answer 2

The click event is not firing because that only happens when you release the mouse button. That isn't happening because there is a modal dialog window visible (the alert window). If you change the alerts to console.log instead then it works perfectly...

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

Answer 3

Because you are using an alert you are interrupting the execution, which causes a problem for me in Firefox - but if you switch to console.log and make sure you have a console (like Firebug) open, you can see both events fire.

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 can't rearrange your UI is to simply bind to the mousedown event instead of click . I've added my own modification of the console.log() jsFiddle to demonstrate.

I ran into this issue with a menu that showed when the user focuses on a text box, and hides when they blur. Clicks in the menu weren't firing in Chrome, because the blur hid the menu on mousedown, so when the mouse came back up the pointer wasn't in the menu any more (because it had disappeared), since that handler then got called before blur hid the menu, and my click events hit their targets.

Answer 5

Just try after update the fiddle http://jsfiddle.net/slolife/PnmxM/ .

Update the onBlur function to this.

Blur and click will works.

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

Current issue is : the click is not triggering because the ui position of "Add item" is changing (because the textfield disappears).