Databases
StackOverflow2013
Postsdbo
POJQuery plugin qTip2 - Click-to-show only works on the first element the first time
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery plugin qTip2 - Click-to-show only works on the first element the first time
    text
    copied!<p>I have a page that has some DIVs on it. I want to show a qTip2 whenever a DIV is clicked. Because of some other stuff I'm doing with the qTip I'd like to reuse the same one over and over if possible.</p> <p>So, I used the qTip2 demo as a starting point and as far as I can tell I have duplicated it exactly. Here's the problem though: It only shows the qtip on the first element that's clicked - the first time. It will show on all other elements as many times as you want to click them, but the first one only the first time.</p> <p>Has anyone run in to this and have a remedy?</p> <p>Here's the code for a sample app I created that exhibits the problem:</p> <p>CSS:</p> <pre><code>#Container { border: 1px solid black; } #Container &gt; DIV { float: left; border: 2px outset silver; margin: 5px; } #Container &gt; DIV:nth-last-child(1) { float: none; border: none; height: 1px; overflow: hidden; margin: -1px 0 0 0;} </code></pre> <p>JavaScript:</p> <pre><code>var Container; var ContainerEndItem; $(document).ready(function () { Container = $('#Container'); if(Container.length == 0){ alert("Container not found!"); return; } var addLinks = $('.TipTarget'); $('&lt;div&gt;Test&lt;/div&gt;').qtip({ content : 'Test', position: { target: 'mouse', // Use the triggering element as the positioning target adjust: { mouse: false, method: 'flip' }, my: 'left center', at: 'right center', effect: true // Enable default 'slide' positioning animation }, show: { target: addLinks, event: 'click', delay: 0 }, hide: { event: 'none' }, events: { show: function (event, api) { // Update the content of the tooltip on each show var target = $(event.originalEvent.target); if(target.length) { api.set('content.text', 'Looking at: ' + target.text()); } } } }); }); </code></pre> <p>HTML:</p> <pre><code>&lt;div id="Container"&gt; &lt;div id="Apples" class="TipTarget"&gt;Apples&lt;/div&gt; &lt;div id="Watermelons" class="TipTarget"&gt;Watermelons&lt;/div&gt; &lt;div id="Peaches" class="TipTarget"&gt;Peaches&lt;/div&gt; &lt;div id="Meat" class="TipTarget"&gt;Meat&lt;/div&gt; &lt;div id="Clear" style="clear: both"&gt;&amp;nbsp;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>JQuery: 1.8.3</p> <p>qTip2: 2.0.1</p> <p>Here's a jsFiddle with this exact setup: <a href="http://jsfiddle.net/Dracorat/Z3WqC/" rel="nofollow">http://jsfiddle.net/Dracorat/Z3WqC/</a></p> <p>Note that if you start by clicking Apple, then Watermelon, then Peaches, then Apples, then Watermelon, then Peaches, and keep repeating, that Apple will show the tip the first time only. The others will show it until the cows come home. </p> <p>Note then that if you refresh and start with Watermelon, it will only show the first time, but all the rest will show each time.</p> <p>What have I done wrong?</p> <p>(And I have already tried using the "each" construct - it didn't change the behavior at all)</p> <p>Thanks!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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