Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Tipsy won't work with jQuery.each() and live:true
    primarykey
    data
    text
    <p><em>Note: This question was marked as solved once, but it figured out that upgrading to the latest jQuery was fixed only one issue. Please see the updated question below for the remaining issue.</em></p> <p>Hi all,</p> <p>I have just run into a weird issue with jQuery.Tipsy.</p> <p>Here's a <strong>simplified</strong> demo fiddle: <a href="http://jsfiddle.net/6nWtx/7/" rel="nofollow">http://jsfiddle.net/6nWtx/7/</a></p> <p>As you can see, the lastly added <code>a.tipsy2</code> element does not get tipsyfied. The <code>.tipsy2</code> elements are being tipsyfied within a <code>jQuery.each()</code> function and at this point I have the problem. Without the <code>each()</code> it works. Unfortunately, I need <code>.each()</code> to iterate through the elements to do some other stuff before I call <code>tipsy()</code>.</p> <p>Any suggestion?</p> <p>Here's the source code of Tipsy: <a href="https://github.com/jaz303/tipsy/blob/master/src/javascripts/jquery.tipsy.js" rel="nofollow">https://github.com/jaz303/tipsy/blob/master/src/javascripts/jquery.tipsy.js</a></p> <p>IMHO the problem is using the combination of <code>jQuery.each()</code> and Tipsy option <code>live:true</code></p> <p><strong>Update:</strong></p> <p>The other stuff I want to do before calling <code>.tipsy()</code> is checking for some optional configuration.</p> <p>For example: <code>&lt;a href="#" title="This is a tooltip" class="tipsyfy delayed"&gt;Help&lt;/a&gt;"</code> </p> <p>In this example I will add the following option to Tipsy: <code>delayIn:1000</code> If there is no <code>delayed</code> class associated to the element this parameter will be <code>delayIn:0</code>.</p> <p>Using the same logic, I want to specify the following classes as well: <code>show-top, show-left, show-right, show-bottom</code> for the Tipsy option called <code>gravity</code>.</p> <p>Example: <code>&lt;a href="#" title="This is a tooltip" class="tipsyfy delayed show-left"&gt;Help&lt;/a&gt;"</code> </p> <p>The full code:</p> <pre><code>$(".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") &amp;&amp; $(this).attr("data-delayIn") != null) b = $(this).attr("data-delayIn"); $(this).tipsy({ gravity: a, fade: true, live: true, delayIn: b }) }) </code></pre> <p>And here is a <strong>full</strong> jsFiddle demo with all the stuffs I want to do: <a href="http://jsfiddle.net/xmLBG/1/" rel="nofollow">http://jsfiddle.net/xmLBG/1/</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload