'jQuery click / on(click) event does not fire in Firefox?

Following code: one click event (close login box) does not fire in Firefox (webkit-browser work, however. And also the slideToggle click event works in all browsers). Does anybody have any ideas why?

HTML

<div class="loginbox" id="loginbox">
    <div class="loginbox_close" id="loginbox_close"></div>
    ...
    <input type="button" value="Login" class="btn_login"></div>
</div>

jQuery

$(document).ready(function() {

    $('#menu').on('click', '#menu_login', function() {
            alert('test'); // this DOES fire, works in all browsers
        $('#loginbox').slideToggle(240,'swing');
    });
    $('#loginbox').on('click', '#loginbox_close', function() {
        alert('test'); // does not fire in FF, however webkit browser work!
        $('#loginbox').slideUp(240,'swing');
    });
});

CSS

.loginbox {
    width:164px;
    padding:10px 18px 14px 18px;
    border:1px solid #CCC;
    border-top:0px;
    position:absolute;
    margin-left:780px;
    background:#678;
    opacity:0.9;
    box-shadow:inset 20px 40px 80px 4px #789,0 2px 8px #ABC;
    }

.loginbox_close {
    width:20px;
    height:20px;
    float:right;
    background:#EEE;
    cursor:pointer;
    position:absolute;
    margin-left:150px;
    }
jqueryeventsonclickjquery-events


Solution 1:[1]

Because you're using a delegated event the click will only fire when bubbled up from #loginbox_close.

Here's a working example of your code with the #loginbox_close outlined in red. Click this box and you'll see the event working.

And here's a fuller version using your code directly from above with the red border added also.

Solution 2:[2]

You better use this: 

$(document).ready(function() {
    $('#menu_login').click(function() {
        alert('test'); // this DOES fire, works in all browsers
        $('#loginbox').slideToggle(240,'swing');
    });
    $('#loginbox_close').click(function() {
        alert('test'); // does not fire in FF, however webkit browser work!
        $('#loginbox').slideUp(240,'swing');
    });
});

It should work. With this you're assigning the click event directly to the menu_login and loginbox divs.

Solution 3:[3]

If the login box is loaded using ajax you can use:

$('#loginbox_close').live('click',function() {
    ...
});

Solution 4:[4]

seems the </div> behind the input is too much, delete it.

<div class="loginbox" id="loginbox">
<div class="loginbox_close" id="loginbox_close"></div>
...
<input type="button" value="Login" class="btn_login">
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jamie Dixon
Solution 2 abottoni
Solution 3 iddo
Solution 4

Related Questions