2

注: この質問は 1 回解決済みとしてマークされましたが、最新の jQuery へのアップグレードで 1 つの問題のみが修正されたことがわかりました。残りの問題については、以下の更新された質問を参照してください。

こんにちは、みんな、

jQuery.Tipsy で奇妙な問題が発生しました。

これは単純化されたデモ フィドルです: http://jsfiddle.net/6nWtx/7/

ご覧のとおり、最後に追加されたa.tipsy2要素はほろ酔いになりません。要素は関数.tipsy2内でほろ酔いでjQuery.each()あり、この時点で問題があります。なくてeach()も動作します。残念ながら、.each()を呼び出す前に、要素を繰り返し処理して他の処理を行う必要がありますtipsy()。

なにか提案を？

Tipsyのソース コードは次のとおりです。

jQuery.each()IMHO問題は、とTipsyオプションの組み合わせを使用していますlive:true

アップデート：

電話をかける前にやりたいことは.tipsy()、オプションの構成をチェックすることです。

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

この例では、次のオプションを Tipsy に追加します。要素に関連付けられたクラスdelayIn:1000がない場合、このパラメーターは になります。delayeddelayIn:0

同じロジックを使用して、次のクラスも指定したいと思いshow-top, show-left, show-right, show-bottomます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

1.6.4 の代わりに jQuery 1.7.1 を使用すると動作します。ライブ機能は、古いバージョンのバグや、まだ実装されていない機能に依存している可能性があります。

更新:私が理解したことから、現在存在するか、将来追加されるクラスtipsyを持つすべての要素にプラグインを呼び出す必要があります。.tipsyfy挿入前に明示的に呼び出したくない (またはできない)。liveプラグインのオプションを使用してそれを達成しようとしています。そうですか？

その場合、回避策を提供できます。on(jQueryliveは非推奨であるため) いくつかのコードを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クラスの唯一の目的がプラグインの作成を指示することであり、後でそれが必要ない場合は、mouseenterを再トリガーする前に削除できます。このようにして、チェック コードが何度も呼び出されることはありません。

$(this).tipsy({...}).removeClass("tipsyfy").trigger("mouseenter");
于 2012-03-02T09:44:02.693 に答える
0

As far as I can see, you don't need to iterate the nodelist. It looks like tipsy does that for you (see this jsfiddle, where in the first list every element gets its own tooltip (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

live私の推測では、Tipsy は、 (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 に答える