jQuery working different in Chrome and Firefox

Question

I am trying to make a dropdown searchbox with autosuggest and all the code is working fine in Chrome but I'm having a problem in Firefox. The problem is rather strange. When the function is executed in Firefox, the execution goes into the if section when the condition is true but it is not going to the else part if it is not true.

$('body').click(function(){
    if($('.search').is(":focus"))
    {
         alert("is focused");
    }
    else if(!($('.search').is(":focus")))
    {
        alert("no");
    }
});

This is the code I have written. I am not able to understand where it is going wrong, but in Chrome the execution happens smoothly.

Answer 1

Your JSFiddle (and your code) just works well.

You just didn't noticed that your body doesn't cover the whole page :

• Green area : body is clicked, field is focused, you get a "is focused"
• Red area : body is clicked, field is not focused, you get a "no"
• Orange area : body is not clicked, you get... nothing

Add this CSS to get it work :

html,
body{
    width:100%;
    height:100%;
}

Answer 2

Probably, you missed the css for html and body:

html,body{width:100%;height:100%;}

It's working fine: http://jsfiddle.net/lotusgodkk/Wu2Gh/1/

Js:

$('body').click(function () {
 if ($('.search').is(":focus")) {
    alert("is focused");
 } else if (!($('.search').is(":focus"))) {
    alert("no");
 }
});

Answer 3

Try removing the second condition and just making it else. The else if doesn't seem necessary because the your condition is a boolean - either true or false.

$('body').click( function() {
    if($('.search').is(":focus")) {
         alert("is focused");
    }
    else {
        alert("no");
    }
});