2011-01-25 9 views
0

私は下部にツールバーメニューを持つページを持っています。私は、メニュー項目を含むブロックの表示プロパティをチェックし、 "ブロック"の場合は "なし"に設定し、 "なし"の場合は "ブロック"に設定する関数を持っています。jQueryイベント.live()wierdness

jQueryを使用してイベントをオブジェクトにバインドしています。私は動的にこのツールバーに項目を追加する可能性があり、自動的に新しいメニュー要素にイベントを添付したいので、live()メソッドを使用します。

私が経験している問題は、live()で要素にイベントをバインドすると、チェックしている要素のCSS表示プロパティは常に「none」です。メニューは決して閉じません。

live()の代わりにbind()を使用すると、期待どおりに動作します。

live()でこの奇妙な動作の原因は何ですか?

問題を再現するデモページがあるhttp://www.ghodmode.com/tbdemo

ありがとうございました。

- Ghodmode

+0

デモは私にとってうまくいきます... – kapa

答えて

0

().live使用してバインドされているコールバックがイベントの委任を介して実行されるため、.liveのターゲットの間のいずれかのハンドラ()と文書が呼び出されます。あなたのコードを見ると、self.hide_menuがbody要素にバインドされていることが分かります。イベントがクラス.j_has_menuを持つターゲットからバブルアップすると、本文のクリックハンドラ(self.hide_menu)が実行され、メニューが閉じます。 self.hide_menuはfalseを返さないので、イベントはドキュメントルートに到達してself.show_menuが必要な関数を呼び出すまでバブリングを続けます。これは、メニューが開いているときにそれをクリックすると、self.hide_menuが最初に実行され、次にself.show_menuが実行されてメニューが永久に開かれることを意味します。

$(document).ready(function() { 
    var self = new Toolbar(); 
    $(".j_has_submenu").live("mouseover", self.show_submenu); 
    $(".j_has_submenu .j_submenu").live("mouseout", self.delay_hide); 
    $(".j_has_menu").live("click", self.show_menu); 
    $('.j_toolbar').siblings().add('body').click(self.hide_menu); // <-- the culprit 
}); 
+0

もちろんです!私はそれを見たはずです。要素をクリックすることは、要素が本文内にあるため、本文のクリックでもあります。身体事象は要素事象の前に起こる。したがって、メソッドが呼び出されると、ブロックは常に "none"に設定された表示プロパティを持ちます。 –

0

私は要素の表示/非表示のための代わりにlivetoggledelegateを使用することをお勧め。

delegateの利点は、イベントグループを扱うルート要素を指定できることです(liveの場合、ルートは常にdocumentです。これは非常に非効率的です)。 [Working demo]

$(document).ready(function() { 
    var self = new Toolbar(); 
    $(".j_toolbar") 
     .delegate(".j_has_submenu", "mouseover", self.show_submenu) 
     .delegate(".j_has_submenu .j_submenu", "mouseout", self.delay_hide) 
     .delegate(".j_has_menu", "click", self.show_menu); 
    $("body").click(self.hide_menu); 
}); 

注:ハンドラが.live()決して火災介して結合していることを言っている場合は、delegate

0

用1.4.2必要なあなたには、いくつかの他のハンドラを持っている場合、これは通常起こりますターゲットが.live()documentreturn false;またはevent.stopPropagation()の場合は、

.live()は、ハンドブックを呼び出すためにドキュメントにバブリングするイベントに、が依存しているためです。泡立つことを防ぐものなら、.live()を殺す。

<document> <!-- gets a $('p > span').live('click', func) --> 
<html> 
    <body> 
     <div id="someElem"> <!-- bind click handler that does "return false;" --> 
     <p> 
      <span>Hi there!</span> <!-- Intended target of the .live() click 
              handler won't work because one of 
              its ancestors has a click with 
              "return false" --> 
     </p> 
     </div> 
    </body> 
</html>