Question

注意：这个问题被标记为已解决一次，但它发现升级到最新的jQuery只修复了一个问题。有关剩余问题，请参阅下面的更新问题。

大家好，

我刚刚遇到了jQuery.Tipsy的一个奇怪的问题。

这是一个简化演示小提琴：http://jsfiddle.net/6nWtx/7/

正如您所看到的，最后添加的a.tipsy2元素无法获得提示。 .tipsy2元素在jQuery.each()函数中被提示，此时我遇到了问题。没有each()它就可以了。不幸的是，在调用.each()之前，我需要tipsy()遍历元素以执行其他操作。

有什么建议吗？

以下是Tipsy的源代码：https://github.com/jaz303/tipsy/blob/master/src/javascripts/jquery.tipsy.js

恕我直言，问题是使用了jQuery.each()和Tipsy选项live:true的组合

更新

在调用.tipsy()之前我要做的其他事情是检查一些可选配置。

例如：<a href="#" title="This is a tooltip" class="tipsyfy delayed">Help</a>"

在此示例中，我将向Tipsy添加以下选项：delayIn:1000如果没有与该元素关联的delayed类，则此参数将为delayIn:0。

使用相同的逻辑，我也想指定以下类：show-top, show-left, show-right, show-bottom用于名为gravity的Tipsy选项。

示例：<a href="#" title="This is a tooltip" class="tipsyfy delayed show-left">Help</a>"

完整代码：

$(".tipsyfy").each(function () {
    var a = "s",
        b = 0;
    if ($(this).hasClass("show-left")) a = "w";
    else if ($(this).hasClass("show-down")) a = "n";
    else if ($(this).hasClass("show-right")) a = "e";
    if ($(this).hasClass("delayed") && $(this).attr("data-delayIn") != null) b = $(this).attr("data-delayIn");
    $(this).tipsy({
        gravity: a,
        fade: true,
        live: true,
        delayIn: b
    })
})

这是一个完整 jsFiddle演示，包含我想要做的所有事情：http://jsfiddle.net/xmLBG/1/

Answer 1

如果使用jQuery 1.7.1而不是1.6.4，它将起作用。也许这个实时功能依赖于旧版本或某些尚未实现的功能的错误。

根据我的理解

更新：，您希望tipsy插件可以调用.tipsyfy类的每个元素，现在存在或将来添加。您不希望（或不能）在插入之前显式调用它。您正尝试使用插件的live选项来完成此操作。是吗？

如果是这种情况，我可以提供解决方法。我尝试使用on（因为jQuery的live已被弃用）将一些代码绑定到加载事件，但它没有用，所以我将它绑定到 mouseenter 并检查插件是否已为该元素构建。如果没有，它会构建它并重新触发事件。

$(document).on("mouseenter", ".tipsyfy", function(e) {
    if ( !$(this).data("tipsy") ) {
        e.preventDefault();
        var a = "s",
            b = 0;
        if ($(this).hasClass("show-left")) a = "e";
        else if ($(this).hasClass("show-down")) a = "n";
        else if ($(this).hasClass("show-right")) a = "w";
        if ($(this).hasClass("delayed") && $(this).attr("data-delayIn") != null) b = $(this).attr("data-delayIn");
        $(this).tipsy({
            gravity: a,
            fade: true,
            live: true,
            delayIn: b
        }).trigger("mouseenter");
        return false;
    }
});

jsFiddle的实例。

对于小优化，如果.tispsyfy类的唯一目的是指示创建插件，之后您不需要它，则可以在重新触发 mouseenter之前将其删除即可。这样就不会一遍又一遍地调用检查代码：

$(this).tipsy({...}).removeClass("tipsyfy").trigger("mouseenter");

Answer 2

据我所知，您不需要迭代节点列表。看起来tipsy为你做了这个（见jsfiddle，在第一个列表中，每个元素都有自己的工具提示（1,2,3）。

Answer 3

你不能这样做吗？这就是你要问的。

$(".tipsy1,.tipsy2").tipsy({live:true,fade:true});
$(".tipsy2").each(function() {
    //do your stuff
});

Answer 4

KooiInc是对的，

<a class="tipsy1" href="#" title="Tipsy">TipsyLink</a>
<a class="tipsy1" href="#" title="Tipsy">TipsyLink</a>
<a class="tipsy1" href="#" title="Tipsy">TipsyLink</a>
<br />
<div id="container"></div>
<input id="add" type="button" value="ok">

并且

$(".tipsy1").tipsy({live:true,fade:true});
$(".tipsy2").tipsy({live:true});
$("#add").click(function() {
    $("#container").append('<a class="tipsy2" href="#" title="Tipsy">TipsyLink</a>');
});

这样可以正常使用

Answer 5

我的猜测是，Tipsy使用某种直接映射到结果，而不是在新版本的jQuery中使用live（在1.6中）或on。因此，当您尝试将插件应用于类tipsy2的链接时，它无法找到任何内容（导致您在代码的后续阶段将其添加到DOM）。对此最简单的解决方法是在稍后阶段运行tipsy函数，可能在document.ready上。

// this works
$(".tipsy1").tipsy({live:true,fade:true});

// add new tipsy element (ok)
$(document.body).append('<a class="tipsy1" href="#" title="TipsyAjax">AjaxTipsy1</a><br/>');

// add new tipsy element (not ok)
$(document.body).append('<a class="tipsy2" href="#" title="Tipsy">TipsyLink</a>');

$(document).ready(function () {
    $(".tipsy2").each(function(){
       // I'm doing some other logic here before I call .tipsy()
       $(this).tipsy({live:true,fade:true});
    })
});

（http://jsfiddle.net/8dg6S/7/）

jQuery Tipsy不适用于jQuery.each（）和live：true

5 个答案: