0

ここでうまく機能する簡単なhover（）イベントがあります：http ：//waterworks.reuniondesign.com/rates （伝票番号の1つにカーソルを合わせる）

そして、それは私がそれを隠していないここのホームページでうまく機能します：http ://waterworks.reuniondesign.com/ （下にスクロール）

しかし、ホームページの「マリーナのレイアウトはここをクリック」をクリックして、divをシンプルなモーダルボックスにすると、スリップ番号を1回マウスオーバーすると、hover（）イベントが2回トリガーされます。何故ですか？変数を設定して、すでに起動されているかどうかを確認してみましたが、うまくいきませんでした。何か案は？

ホバーイベントを実行するコードは次のとおりです。jLoaderはajax関数です。

    $(document).ready(function(){
    var live = false;
    $('.slip').hover(function(){
        console.log('opening ' + live);
        if (live != true) {
            live = true;
            console.log('still opening ' + live);
            $(this).css('z-index','999');
            $(this).delay(500).append("<div id='slip_popup'><div id='slip_details'>loading slip details...</div></div>");
            jLoader('/blocks/slip_detail.php?slip_number=' + $(this).attr('id').replace('slip_',''),'replace','slip_details');
        }
    },function(){
        $(this).css('z-index','1');
        $('#slip_popup').remove();
        live = false
        console.log('closing ' + live);
    });
});

最後に、append（）関数の前に遅延関数が機能しない理由を誰かが知っているなら、私は知りたいです！

4

1 に答える 1

0

さて、私はこれを理解しましたが、一部の人々はもっと詳しく説明できるかもしれません。何が起こっているのかというと、simplemodalスクリプトは、元のdivとその内容を破棄せず、クローンを作成するだけです。これが意味するのは、simplemodal呼び出しの前にdivが存在する場合、そのdiv内のすべてのものがDOM（？）のどこかに複数のインスタンスを持っているということです。

DOMにはまったく同じIDを持つ要素のインスタンスが複数あるため、jquery hover（）関数はどういうわけか混乱しているはずです。そのため、そのうちの1つにカーソルを合わせると、2回呼び出され、残りのホバースクリプトが実行されます。 、2つのdivを追加し、それらにajax呼び出しを2回入力します。

つまり、私がやったことは、simplemodalの後にAjax呼び出しを使用して、モーダルボックスのコンテンツを埋めることです。このようにして、要素はモーダル呼び出しの後にDOMに追加されるため、複製されません。

于 2012-01-05T00:20:50.613 に答える