4

以下代码：单击事件（关闭登录框）不会在 FF 中触发（但是 webkit-browser 工作。而且 slideToggle click 事件在所有浏览器中都有效）。有人知道为什么吗？

非常感谢您的帮助！

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

4 回答 4

5

因为您使用的是委托事件，所以点击只会在从#loginbox_close.

这是您的代码的一个工作示例，其中#loginbox_close以红色标出。单击此框，您将看到该事件有效。

这是一个更完整的版本，直接从上面使用您的代码，还添加了红色边框。

于 2012-05-15T09:44:12.640 回答
0

你最好使用这个：

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

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

于 2012-05-15T09:34:48.757 回答
0

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

$('#loginbox_close').live('click',function() {
    ...
});
于 2012-05-15T09:44:15.587 回答
0

好像</div>后面的输入太多了，删掉吧。

<div class="loginbox" id="loginbox">
<div class="loginbox_close" id="loginbox_close"></div>
...
<input type="button" value="Login" class="btn_login">
</div>
于 2012-05-15T11:08:30.130 回答