Question

我正在尝试使用“帮助”工具提示，这些工具提示会在您点击某个类别的标签时显示，并在您点击时离开。什么也没出现。我可以在firebug中设置断点并查看'loading'工具提示，然后当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()是被召唤。

Answer 2

您没有取消显示工具提示的事件的冒泡，而您要做的第一件事是将删除处理程序附加到正文。因此，当你的init处理程序结束时，jQuery和浏览器将该事件委托给链，在那里看到并处理你的删除处理程序。

解决方案是取消初始化处理程序中的冒泡。

javascript WTF，幻像函数调用

2 个答案: