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