2

注意：这个问题被标记为已解决一次，但它发现升级到最新的 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对于 Tipsy 选项称为gravity.

例子：<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/

4

5 回答 5

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");
于 2012-03-02T09:44:02.693 回答
0

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

于 2012-03-02T09:41:55.583 回答
0

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

$(".tipsy1,.tipsy2").tipsy({live:true,fade:true});
$(".tipsy2").each(function() {
    //do your stuff
});
于 2012-03-02T09:48:29.133 回答
0

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>');
});

那会很好用

于 2012-03-02T09:50:19.413 回答
0

我的猜测是 Tipsy 使用某种直接映射到结果，而不是使用live（在 1.6 中）或on更新版本的 jQuery。
因此，当您尝试将插件应用到具有该类的链接时，tipsy2它找不到任何（导致您在代码的后期将其添加到 DOM）。最简单的解决方法是在稍后阶段运行醉酒功能，也许在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/ )

于 2012-03-07T08:48:19.167 回答