jQuery Tipsy不适用于jQuery.each（）和live：true [英] jQuery Tipsy won't work with jQuery.each() and live:true

问题描述

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

大家好，

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

I have just run into a weird issue with jQuery.Tipsy.

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

Here's a simplified demo fiddle: http://jsfiddle.net/6nWtx/7/

如你所见，最后添加 a.tipsy2 元素没有得到提示。 .tipsy2 元素在 jQuery.each（）函数中被提示，此时我遇到了问题。没有 each（）它可以工作。不幸的是，在调用 tipsy（）之前，我需要 .each（）来遍历元素以执行其他操作。 。

As you can see, the lastly added a.tipsy2 element does not get tipsyfied. The .tipsy2 elements are being tipsyfied within a jQuery.each() function and at this point I have the problem. Without the each() it works. Unfortunately, I need .each() to iterate through the elements to do some other stuff before I call tipsy().

有任何建议吗？

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

Here's the source code of Tipsy: https://github.com/jaz303/tipsy/blob/master/src/javascripts/jquery.tipsy.js

恕我直言，问题是使用 jQuery.each（）和Tipsy的组合选项 live：true

IMHO the problem is using the combination of jQuery.each() and Tipsy option live:true

更新：

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

The other stuff I want to do before calling .tipsy() is checking for some optional configuration.

例如：< a href =＃title =这是工具提示class =tipsyfy delayed>帮助< / a>

在这个例子中，我将向Tipsy添加以下选项： delayIn：1000 如果没有<$ c与元素相关联的$ c>延迟类这个参数将是 delayIn：0 。

In this example I will add the following option to Tipsy: delayIn:1000 If there is no delayed class associated to the element this parameter will be delayIn:0.

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

Using the same logic, I want to specify the following classes as well: show-top, show-left, show-right, show-bottom for the Tipsy option called gravity.

示例：< a href =＃title =这是工具提示class =tipsyfy delayed show-left>帮助< / 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/

And here is a full jsFiddle demo with all the stuffs I want to do: http://jsfiddle.net/xmLBG/1/

推荐答案

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

If you use jQuery 1.7.1 instead of 1.6.4 it will work. Maybe that live feature is relying on something buggy with the older versions, or some not-yet-implemented feature.

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

Update: from what I understood, you want the tipsy plugin to be called to every element with the .tipsyfy class, present now or added in the future. You don't want to (or can't) call it explicitly before insertion. You're trying to accomplish that using the live option of the plugin. Is that right?

如果是这种情况，我可以提供解决方法。我尝试在上使用 （因为jQuery的< a href =http://api.jquery.com/live/ =nofollow> live 已弃用）将某些代码绑定到加载事件，但它不起作用，因此我将其绑定到 mouseenter 并检查该插件是否已为该元素构建。如果没有，它会构建它并重新触发事件。

If that's the case I can offer a workaround. I tried to use on (since jQuery's live is deprecated) to bind some code to the load event, but it didn't work, so I bound it to mouseenter and checked whether or not the plugin was already built for that element. If not, it builds it and re-triggers the event.

$(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的唯一目的 class用于指示插件创建，之后您不需要它，您可以在重新触发 mouseenter 之前删除它。这样就不会一遍又一遍地调用检查代码：

For a small optimization, if the sole purpose of the .tispsyfy class is to instruct the plugin creation, and you don't need it afterwards, you can remove it prior to re-triggering the mouseenter. This way the checking code won't be called over and over again:

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

这篇关于jQuery Tipsy不适用于jQuery.each（）和live：true的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！