jQuery单击/打开（单击）事件不会在FF中触发？

Question

以下代码：一次点击事件（关闭登录框）不会在FF中激活（但webkit浏览器工作。而且，slideToggle点击事件也适用于所有浏览器）。有人有什么想法吗？

非常感谢您的帮助！

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

Answer 1

由于您使用的是委托活动，因此只有在#loginbox_close冒泡时才会触发点击。

Here's a working example of your code，其中#loginbox_close以红色标出。单击此框，您将看到事件正常运行。

并here's a fuller version直接使用上面的代码并添加了红色边框。

Answer 2

你最好使用它：

$(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');
    });
});

它应该工作。有了这个，您可以将click事件直接分配给menu_login和loginbox div。

Answer 3

如果使用ajax加载登录框，您可以使用：

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

Answer 4

似乎输入后面的</div>太多，删除它。

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