Databases
StackOverflow2013
Postsdbo
POJquery click event repeats itself... sometimes
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery click event repeats itself... sometimes
    primarykey
    data
    text
    <p>I'm having a weird (annoying) issue with a small jquery complement I'm coding. It is meant to control a small tabbed nav for content on a page, it's not meant to be a big deal. It currently has 3 buttons (tabs) and the system is meant to fade out the current tab and content and change to the new one when you click on any of the tabs. </p> <p><a href="http://jsfiddle.net/E7Trd/" rel="nofollow">jsfiddle</a></p> <p>The HTML goes as follows:</p> <pre><code> &lt;div class="fixed-wing-nav-cont"&gt; &lt;div class="fixed-wing-nav"&gt; &lt;div class="fixed-wing-nav-item" id="wing-nav-1"&gt;Features&lt;/div&gt; &lt;div class="fixed-wing-nav-item" id="wing-nav-2"&gt;Benefits&lt;/div&gt; &lt;div class="fixed-wing-nav-item active" id="wing-nav-3"&gt;Screenshots&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="fixed-wing-tab-cont"&gt; &lt;div id="fixed-wing-tab-1"&gt; Features Tab &lt;/div&gt; &lt;div id="fixed-wing-tab-2"&gt; Benefits Tab &lt;/div&gt; &lt;div id="fixed-wing-tab-3" class="active"&gt; &lt;img src="images/screens.png" alt="screens" /&gt; &lt;a href="#" class="red"&gt;VIEW ALL&lt;/a&gt; &lt;/div&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>And the CSS tied to it, just in case it might be important, is the following:</p> <pre><code>.fixed-wing-nav-cont{ width:100%; border-bottom:1px solid #747474; margin:20px 0; } .fixed-wing-nav{ display:table; border-spacing:5px 0; border-collapse:separate; margin-left:-5px; } .fixed-wing-nav-item{ margin-right:40px; height:40px; color:#1c5fa9; font-size:16px; border-left:1px solid #1c5fa9; border-top:1px solid #1c5fa9; border-right:1px solid #1c5fa9; text-align:center; padding:0 10px; display:table-cell; vertical-align:middle; cursor:pointer; } .fixed-wing-nav-item.active{ color:#fff; background-color:#1c5fa9; } .fixed-wing-tab-cont{ position:relative; width:100%; height:400px; } .fixed-wing-tab-cont&gt;div{ position:absolute; top:0px; left:0px; width:100%; height:400px; overflow:hidden; display:none; } .fixed-wing-tab-cont&gt;div.active{ display:block; } .fixed-wing-tab-cont img{ border:none; } </code></pre> <p>The Jquery complement is a very simple one - I know there are more elegant ways to do it, but I chose to go for what's meant to be faster to code, and simpler overall:</p> <pre><code>&lt;script type="text/javascript"&gt; $('#wing-nav-1').click(function(){ $('div.fixed-wing-nav-item').removeClass("active",function(){ $('#wing-nav-1').addClass("active"); }); $('#fixed-wing-tab-3').removeClass("active"); $('.fixed-wing-tab-cont&gt;div').fadeOut("fast",function(){ $('#fixed-wing-tab-1').fadeIn("fast"); }); }); $('#wing-nav-2').click(function(){ $('div.fixed-wing-nav-item').removeClass("active",function(){ $('#wing-nav-2').addClass("active"); }); $('#fixed-wing-tab-3').removeClass("active"); $('.fixed-wing-tab-cont&gt;div').fadeOut("fast",function(){ $('#fixed-wing-tab-2').fadeIn("fast"); }); }); $('#wing-nav-3').click(function(){ $('div.fixed-wing-nav-item').removeClass("active",function(){ $('#wing-nav-3').addClass("active"); }); $('#fixed-wing-tab-3').removeClass("active"); $('.fixed-wing-tab-cont&gt;div').fadeOut("fast",function(){ $('#fixed-wing-tab-3').fadeIn("fast"); }); }); &lt;/script&gt; </code></pre> <p>I'm loading Jquery 1.9 straight from the jquery site. Now, the issue I'm having is this: The page opens with the third tab loaded, no problems. If I click to go to the first tab, it works perfectly: The third tab fades out, the first one fades in and the "active" state from the tab button is moved from the third to the first one. If I then choose to go to the second tab it also works perfectly. However, if I try to go from any tab to the third one or from the third to the second it plays the animation twice, which makes no sense whatsoever: All three tabs are running the same code. I've been looking at the code over and over for an hour and I can't see why this is happening - Why does the first tab work perfectly, but the third one have such issues? I've tried removing the "active" state from all items in the HTML (thus making the tab/content start empty) and the issue still happens.</p> <p>Can anyone help me here? This just doesn't make any sense to me :\</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USWill Tate
    1. USTizzy
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COYou should always call `.stop(true, true)` before animating an element to ensure that any previous queued animations are finished. [documentation](http://api.jquery.com/stop/)
      singulars
      1. POJquery click event repeats itself... sometimes
      1. USjbabey
    2. COFor each click you remove class active from tab-3. Is it ok?
      singulars
      1. POJquery click event repeats itself... sometimes
      1. USAnto Jurković
    3. COYes, it is ok. It isn't necessary, I put it there as a safety measure since the active class for content was meant to show it. When jQuery animates, it doesn't care about the "active" part, since jquery animations instead add inline css that takes precedence over whatever the active class says. Also, the system works the same without that line, so feel free to ignore it - I added said line after it started bugging out, in hopes it might help, but it didn't :(
      singulars
      1. POJquery click event repeats itself... sometimes
      1. USTizzy
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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