javascript - jQuery Tipsy不适用于jQuery.each()和live:true

注意：这个问题曾经被标记为已解决，但是它发现升级到最新的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/

最佳答案

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

更新：据我了解，您希望tipsy插件被具有.tipsyfy类的每个元素调用，现在提供或将来添加。您不想（或不能）在插入之前显式调用它。您正在尝试使用插件的live选项来实现。那正确吗？

如果是这样，我可以提供一种解决方法。我尝试使用on（因为不推荐使用jQuery的live）将一些代码绑定到load事件，但是它没有用，所以我将其绑定到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类的唯一目的是指示插件的创建，而之后又不需要它，则可以在重新触发mouseent之前将其删除。这样，不会一遍又一遍地调用检查代码：

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

关于javascript - jQuery Tipsy不适用于jQuery.each()和live:true，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9530882/