JavaScriptのWTF、ファントム関数の呼び出し

Question

私は、特定のクラスのラベルをクリックすると表示される「ヘルプ」ツールチップを表示しようとしています。何も表示されません。 Firebugにブレークポイントを設定し、「読み込み中の」ツールチップを見ると、ツールチップが正しく更新されたときに、removeTooltipはphantomly（スタックトレースはjqueryのF（）というスタックトレースと呼ばれます）。そのため、ツールチップは非常に速く設定されて削除され、見た目には見えません。

HelpText.removeTooltip = function() { 
    $('#activeHelpTip').remove(); 
    $('body').unbind('click', HelpText.removeTooltip); 
} 

HelpText.initToolTip = function(clickedElement) { 
    $('body').click(HelpText.removeTooltip); 
    $(clickedElement).append('<span id="activeHelpTip" class="helpTip">Loading help...</span>'); 
} 

HelpText.updateTooltip = function(helpString, clickedElement, methodName) { 
    if (helpString == null) { helpString = "Help text has not been defined for selected field"; } 
    $('#activeHelpTip').html(helpString); 
} 

$(document).ready(function() { 
    $('.helpText').click(function() { 
     var helpRequested = $(this).html(); 
     var path = window.location.pathname; 
     var fullPage = path.substring(path.lastIndexOf('/') + 1); 
     var page = fullPage.substring(0, fullPage.indexOf('.')); 
     var label_helpRequested = $(this).html(); 

     HelpText.initToolTip(this); 
     HelpText.getHelpText(page, label_helpRequested, this); 
    }); 

HelpText.getHelpText = function(pageNameParam, fieldNameParam, element) { 
    var params = { pageName: pageNameParam, fieldName: fieldNameParam }; 

    if (this._webRequest) { 
     // abort the previous web service call if we 
     // are issuing a new one and the previous one is 
     // active. 
     this._webRequest.get_executor().abort(); 
     this._webRequest = null; 
    } 
    // this._webRequest is a handler on the async request 
    this._webRequest = Sys.Net.WebServiceProxy.invoke(HelpTextServiceURL, 
               "GetHelpText", 
               false, /* use GET */ 
               params, /* parameters to the Ajax service method - case and type sensitive */ 
               HelpText.updateTooltip, /* success callback */ 
               null, /* failure callback */ 
               element); /* user context - preserved info - accessed in the success callback - in this case will contain SPAN */ 
} 

Answer 1

あなたinitToolTip機能はremoveToolTip()を呼び出すページのボディ全体のためのオンクリックハンドラを設定します。私は、クリックイベントが$('.helpText')で発生すると、ツールチップが追加され、クリックイベントがbody要素まで泡立てて、removeToolTip()が呼び出されていることが想像されます。

Answer 2

あなたは、ツールチップを表示するイベントでバブリングをキャンセルしていません。まず、本体に削除ハンドラをアタッチします。だから、あなたのinitハンドラが終了すると、jQueryとブラウザはそのイベントをチェーンの上に委譲し、そこでハンドラが見えて処理されます。

解決策は、initハンドラのバブリングをキャンセルすることです。