jQuery Tipsy將無法使用jQuery.each（）和live：true

Question

注意：此問題被標記爲解決一次，但它發現只升級到最新的jQuery只有一個問題。有關剩餘問題，請參閱下面的更新問題。

大家好，

我剛纔碰到與jQuery.Tipsy一個奇怪的問題。

這裏有一個簡單的演示小提琴：http://jsfiddle.net/6nWtx/7/

正如你所看到的，最後加入a.tipsy2元素沒有得到tipsyfied。在函數中，.tipsy2元素正在滿足要求，此時我遇到了問題。沒有each()它的作品。不幸的是，在我呼叫tipsy()之前，我需要.each()來遍歷元素來做其他一些事情。

有什麼建議嗎？

這裏有醉意的源代碼：https://github.com/jaz303/tipsy/blob/master/src/javascripts/jquery.tipsy.js

恕我直言，這個問題是使用jQuery.each()組合和醉意選項live:true

更新：

其他的東西我想打電話之前做.tipsy()正在檢查某些可選配置。

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

在這個例子中，我將下列選項添加到醉意：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/

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

在​​3210的現場示例。

對於一個小的優化，如果.tispsyfy類的唯一目的是爲了指導插件創建，而你不需要它之後，你可以將其刪除，重新觸發前的的mouseenter。這樣的檢查代碼將不會被反覆調用：

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

Answer 2

至於我能看，你不需要迭代節點列表。它看起來像tipsy爲你做到這一點（看到這jsfiddle，其中第一個列表中的每個元素都有自己的工具提示（1,2,3））

Answer 3

你不能這樣做嗎？這是你問的問題。

$(".tipsy1,.tipsy2").tipsy({live:true,fade:true}); 
$(".tipsy2").each(function() { 
    //do your stuff 
}); 

Answer 4

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

這將很好地工作

Answer 5

我的猜測是，醉了都使用某種直接映射到結果，在新版本的jQuery中不使用live（1.6）或on。
因此，當您試圖將該插件應用於類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/）