jquery - 页面加载后，鼠标悬停功能首次不起作用

Question

我有这个功能，当鼠标悬停时需要显示工具提示:

  content.live({
            mouseover: function () {
                if (settings.showButtons == false) {
                    content.hover(function () {
                        $('#' + settings.toolTipId).remove();
                        content.attr({ title: '' });
                        buildTipify();
                        positionTipify();
                    }, function () {
                        removeTipify();
                    });
                }
            },

但是，当页面第一次加载时，它不会弹出，如果我单击页面上的任意位置，并且如果我将鼠标悬停在链接上，则会显示弹出窗口。

我认为hover中的hover函数可能是使scribble的函数:(

谁能指出我做错了什么？

这是我的 fiddle demo

Answer 1

问题在于，您仅在 content 的 mouseover 事件中绑定(bind)悬停事件(技术上是 mouseenter + mouseleave)。所以第一次，没有绑定(bind)悬停事件，第二次，所以你的工具提示显示。

老实说，我不太明白你正在做的 .live() 的全部内容:- 为什么要对存在并保留的元素(内容)使用事件委托(delegate)？- 为什么你只在 mouseover 和 mouseleave 下绑定(bind)事件(单击或悬停)。这根本就没有意义……

这就是我简单的做法。完全去掉.live()调用，根据settings.showButtons直接绑定(bind)hover或click事件:

if (settings.showButtons == false) {
    content.hover(function() {
        $('#' + settings.toolTipId).remove();
        content.attr({
            title: ''
        });
        buildTipify();
        positionTipify();
    }, function() {
        removeTipify();
    });
} else {
    content.click(function(el) {
        // remove already existing tooltip
        $('#' + settings.toolTipId).remove();
        content.attr({
            title: ''
        });
        buildTipify();
        positionTipify();
        // Click to close tooltip
        $('#' + settings.closeTipBtn).click(function() {
            removeTipify();
            return false;
        });
        return false;
    });
}​

<强> DEMO

注意:我对关闭按钮的 CSS 做了一些更改，因为您的按钮不可见，所以我看不到它。