Question

我是jquery的新手，并且使用.delegate（）将函数绑定到页面中的元素时出现问题。

我无法使用.bind（）执行此操作，因为当我部分重新加载部分页面时，页面中的DOM会发生变化。

我已经看过使用.live（）但似乎已经被.delegate（）弃用了。

我想知道是否有人可以帮我解决我可能出错的地方？

我正在尝试构建一个可以在整个网站中使用的工具提示。我知道已经有jquery工具库已经有了这个功能，但我宁愿自己构建一个简单的版本。

这是代码。

$jQuery.fn.myToolTip = function () {
    var offTopSide = 0;
    var offLeftSide = -360;

    $(this).mouseover(function () {
        //left side of button
        var currentLeftPosition = $(this).position().left;
        //top side of button
        var currentTopPosition = $(this).position().top;
        var myToolTip = $(this).next();
        myToolTip.css("top", (currentTopPosition + offTopSide) + "px");
        myToolTip.css("left", (currentLeftPosition + offLeftSide) + "px");
        myToolTip.show();
    });

    $(this).mouseout(function () {
        $(this).next().hide();
    });
}

$(document).ready(function () {
    $(document).delegate('a', "mouseover mouseout", function () {
        $(this).myToolTip();

    });
});

继承人的HTML ......

<a class="button" href="">Mouse over this link...</a>
<div class="tooltip" style="display: none;">
    <div class="tooltip-inner">
        tooltip1
    </div>
    <div class="clear">
    </div>
</div>

目前，只有在鼠标悬停和链接ONCE的鼠标输出后，这似乎才有效。第二次鼠标悬停触发工具提示..

道歉，如果这是非常明显的事情。

此致

取值

Answer 1

我正在阅读它的方式，您在myToolTip();和mouseover上的元素上调用mouseout以设置新的mouseover＆amp; mouseout事件回调所以第二次鼠标悬停时，将调用新的事件回调。

你想这样做：

$(document).delegate('a', "mouseover", function (){
    //left side of button
    var currentLeftPosition = $(this).position().left;
    //top side of button
    var currentTopPosition = $(this).position().top;
    var myToolTip = $(this).next();
    myToolTip.css("top", (currentTopPosition + offTopSide) + "px");
    myToolTip.css("left", (currentLeftPosition + offLeftSide) + "px");
    myToolTip.show();
});

和此：

$(document).delegate('a', "mouseout", function () {
    $(this).next().hide();
});

使用.delegate（）函数的JQuery问题，麻烦绑定函数到元素...

1 个答案: