Javascript WTF, Phantom Funktionsaufruf

Question

Ich versuche, 'Hilfe' Tooltips zu haben, die erscheinen, wenn Sie auf Etiketten einer bestimmten Klasse klicken, und weggehen, wenn Sie wegklicken. Nichts erscheint. Ich kann Breakpoints in Firebug setzen und den 'loading' Tooltip sehen, und dann, wenn der Ajax die Tooltip Updates korrekt zurückgibt, wird removeTooltip phantomly aufgerufen (Stack Trace sagt nur F() F() in jquery). So wird der Tooltipp so schnell gesetzt und entfernt, dass er nie gesehen wird.

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

Ihre initToolTip Funktion setzt einen On-Click-Handler für den gesamten Körper von der Seite removeToolTip() zu nennen. Ich stelle mir vor, dass, wenn das Klickereignis auf $('.helpText') ausgelöst wird, die QuickInfo hinzugefügt wird und dann das Klickereignis auf das Element body aufspringt, an dem removeToolTip() aufgerufen wird.

Answer 2

Sie haben das Bubbling für das Ereignis, das den Tooltip anzeigt, nicht abgebrochen, und das erste, was Sie tun, ist, einen remove-handler an den body anzuhängen. Wenn also Ihr Init-Handler beendet wird, delegieren jQuery und der Browser dieses Ereignis über die Kette, wo Ihr Entfernungs-Handler gesehen und verarbeitet wird.

Die Lösung ist, Bubbling in Ihrem Init-Handler abzubrechen.