javascript WTF，幻像函数调用

Question

我试图让“帮助”工具提示在您单击特定类别的标签时出现，并在您单击离开时消失。什么也没有出现。我可以在 firebug 中设置断点并查看“正在加载”工具提示，然后当 ajax 正确返回工具提示更新时，removeTooltip 会被幻影调用(堆栈跟踪只是在 jquery 中显示 F() 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() 被调用。