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="This is a tooltip" class="tipsyfy delayed">Help</a>"

在此示例中，我将向Tipsy添加以下选项:delayIn:1000如果没有与元素关联的delayed类，则此参数将为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表示gravity的Tipsy选项.

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="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/

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?

如果是这种情况，我可以提供一种解决方法.我尝试使用 on (因为jQuery的

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类的唯一目的是指导插件的创建，而您以后不需要它，则可以在重新触发 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屋！