jQuery click / on(click) 事件不会在 FF 中触发？答案

【问题标题】：jQuery click / on(click) event does not fire in FF?jQuery click / on(click) 事件不会在 FF 中触发？
【发布时间】：2012-05-15 09:29:43
【问题描述】：

以下代码：在 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;
    }

【问题讨论】：

登录框的高度是多少？是 display:block 还是 inline？
@Daniel Ruf：这是整个css，所以没有定义高度......在我有一个最小高度之前，但是然后slideToggle事件在那一点停止了几毫秒......
@DanielRuf：谢谢，有趣的一点......我尝试添加一个高度属性，但不幸的是它没有改变任何东西......所以，同样的结果......
您是否尝试将该代码放在文件末尾？
@DanielRuf：杰米的回答解决了这个问题，谢谢丹尼尔！ :)

标签： events javascript-events onclick jquery

【解决方案1】：

因为您使用的是委托事件，所以点击只会在从 #loginbox_close 冒泡时触发。

Here's a working example of your code 与#loginbox_close 以红色标出。单击此框，您将看到该事件有效。

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

【讨论】：

感谢 Jamie，感谢您的回答和努力！真的很抱歉，但我不知道这意味着什么……你说的听起来很棒，但恐怕我完全不明白……抱歉……
您传递给on 函数的第二个参数是元素的ID。这告诉单击事件仅在附加到 #loginbox 的事件是由于单击 #loginbox_close 而触发时触发。
找我喜欢原始代码吗？但是一个
太多了？

代码与@DanielRuf 完全相同，除了我在#loginbox_close 上设置的边框。不知道</div> 是什么意思。

我的意思是后面的

似乎这是问题所在

【解决方案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。

【讨论】：

谢谢ABottoni，我试过直接点击，但是在这个地方它也不起作用......此外我需要使用.on，因为稍后在某些时候登录收件箱正在通过 jquery ajax 加载并单击将不起作用...

【解决方案3】：

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

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

【讨论】：

谢谢你的回答，.on 在这里和.live 做的一样，但是.live 也有一些缺点（有一个很棒的博客叫做 sth like “everything live has to die ")，但不幸的是我没有链接了......

【解决方案4】：

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

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

【讨论】：

输入背后的内容是什么？你的意思是按钮的ID？为什么你觉得太多了？
啊，好敏锐的眼光！ :) 这是我的错，我遗漏了中间不必要的 html 元素（如 ... 所示），所以开头的 <div> 出现在点中......但你不知道，这是我的错误（复制粘贴）