13

修正方法がわからない IE のバグがあります。

jQueryを使用して、メニューを動的に移動して、マウスオーバーの要素に表示します。

私のコード（簡略化）は次のようになります。

$j = jQuery.noConflict();

$j(document).ready(function()
{
    //do something on the menu clicks
    $j('div.ico').click(function() { alert($j(this).parent().html()); });

    setUpActions('#tableId', '#menuId');
});

//on mouseover set up the actions menu to appear on mouseover
function setUpActions(tableSelector, menuSelector)
{
    $j(tableSelector + ' div.test').mouseover(function()
    {
        //note that append will move the underlying
        //DOM element with all events from it's old
        //parent to the end of this one.
        $j(this).append($j(menuSelector).show());
    });
}

このメニューは、IE7、IE8、および IE8-as-IE7 で移動された後、メニューのイベントを正しく登録していないようです (MS さん、これは IE8 の「新しいレンダリング エンジン」です)。

他のすべてで期待どおりに機能します。

こちらの基本的なデモで動作を確認できます。

デモでは、問題の 2 つの例を確認できます。

  1. ボタンの背後にある画像はホバー時に変更する必要があります (CSS :hover セレクターで行います)。最初のマウスオーバーで機能しますが、その後は持続します。
  2. クリック イベントは発生しませんが、開発ツールを使用して手動で呼び出すことができ、まだサブスクライブされています。

(2) は IE8 の開発ツールで確認できます。

  1. IE8でページを開く
  2. 開発ツールを開く
  3. 「スクリプト」タブと「コンソール」サブタブを選択します
  4. タイプ:$j('#testFloat div.ico:first').click()サブスクライブされたイベントを手動で呼び出す
  5. ページにアラートが表示されます

これは、イベント サブスクリプションが失われていないことを意味します。イベント サブスクリプションはまだそこにあり、クリックしても IE がそれらを呼び出していないだけです。

このバグが発生する理由を知っている人はいますか (IE の由緒あるエンジンによるもの以外に)?

回避策はありますか?

たまたま他のすべてで期待どおりに機能するのは、私が間違っていることでしょうか?

4

4 に答える 4

10

奇妙なことに、クリック イベントは IE で発生しませんが、マウスダウンまたはマウスアップに変更すると、イメージ ホバーの問題がまだあるにもかかわらず、期待どおりに動作します。

$j('div.ico').mouseup(function() { alert($j(this).parent().html()); });
于 2009-04-26T09:00:09.717 に答える
2

私は同じ問題を抱えていましたが、以前の解決策はどれもうまくいきませんでした。問題は、アニメーション関数の後にチェーンされている場合、IE7 (私は IE の他のバージョンをテストしていません) が .click を登録しないことであることが判明しました。したがって、これは機能しません:

$("div.menubar-item").animate({
    color:"#000"
}, 0)

.click(function()
{
    //not firing
})

しかし、これは機能します

$("div.menubar-item").click(function()
{
    //firing!
})

$("div.menubar-item").animate({
    color:"#000"
}, 0)

EDIT : mouseenter、mouseleave などについても同様です。

EDIT 2：クリック後にアニメーション機能をチェーンすると、イベントが発生してアニメーション化されるため、これも「有効」です。

$("div.menubar-item").click(function()
{
    //firing!
})

.animate({
    color:"#000"
}, 0)
于 2011-09-01T11:14:11.577 に答える
1

IE は、DOM に動的に追加された項目にイベントをコピーしません。

バインドする必要があるものを追加した後、クリックイベントをバインドするか、.live() を使用してみてください

clone() を使用している場合は、clone(true) を渡して、イベント ハンドラーのコピーを明示的に要求することを忘れないでください。

var actionMenu = $j(menuSelector);

//actionMenu is now an Instance of jQuery, not the DOM object
//because jQuery is chainable

actionMenu.hide();

// notice the clone(true)

$j(this).append( actionMenu.clone(true) );

jQuery は連鎖可能であるため、これを「jQuery」構文で次のように記述することもできます。

var clone = $j(menuSelector)
               .clone(true)
               .css('background-color', $j(this).css('background-color') );

$j(this).append(clone);

表示/非表示は非常に高速であるため、必要ないと思います。

于 2009-04-23T04:07:42.890 に答える
0

最新のjqueryの代わりにライブイベントを使用することを強くお勧めします。

このようにして、最初に作成されていないcssクラスによって要素にバインドできますが、新しい要素が追加されるとクリックバインドが追加されます。

http://docs.jquery.com/Events/live

于 2009-04-22T11:03:41.133 に答える