javascript WTF, phantom function call

Question

I'm trying to have 'help' tooltips which appear when you click on labels of certain class, and go away when you click away. Nothing appears. I can set breakpoints in firebug and see the 'loading' tooltip, and then when the ajax returns the tooltip updates correctly, then removeTooltip gets called phantomly (stack trace just says F() F() in jquery). So the tooltip gets set and removed so fast that it's never seen.

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

Your initToolTip function sets an on-click handler for the entire body of the page to call removeToolTip(). I imagine that what is happening is that when the click event fires on $('.helpText'), the tooltip is added, and then the click event bubbles up to the body element, at which point removeToolTip() is being called.

Answer 2

you haven't cancelled bubbling on the event that shows the tooltip, and the first thing you do is attach a remove handler to body. So when your init handler ends, jQuery and the browser delegate that event up the chain, where your remove handler is seen and processed.

The solution is to cancel bubbling in your init handler.