4

次のコード: ワンクリック イベント (ログイン ボックスを閉じる) は、FF では発生しません (ただし、webkit-browser は機能します。また、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;
    }
4

4 に答える 4

5

委任されたイベントを使用しているため、クリックは からバブルアップしたときにのみ発生します#loginbox_close。

#loginbox_close赤で囲まれたコードの実際の例を次に示します。このボックスをクリックすると、イベントが機能していることがわかります。

そして、これは赤い境界線も追加された上から直接コードを使用した完全なバージョンです。

于 2012-05-15T09:44:12.640 に答える
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 に答える
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 に答える