Menu icon Foundation
Tab is not working in Firefox

TypeError: this.dispatchEvent is not a function
            

         

Tab is not working in Firefox and is throwing this error message when clicked. Any solutions?

tab

TypeError: this.dispatchEvent is not a function
            

         

Tab is not working in Firefox and is throwing this error message when clicked. Any solutions?

This post has been closed. No new replies can be added.

Lyn over 5 years ago

Hey there,

Do you have a link where we would witness this issue and try to help you out ?

Regards,

Lyn.

Paul W over 5 years ago

I can also confirm this has started happening in FF31... I'll try to get an example together.

Lyn over 5 years ago

Hey there,

Just updated to FF31 and everything seems fine.
Can you confirm that the tabs here are not working : http://jsfiddle.net/4jX7L/

Regards,

Lyn.

Htet Htet Aung over 5 years ago

I am working on a mac 0s 10.9.4 with firefox 31.0.

Here is my tab code. I have the starter index.html from Foundation where I put this code in (in its own row) AND right now the tabs are NOT working in Safari, Chrome, or Firefox.

Very weird!

In jsfiddle.net, the code works as expected.

                  <ul class="tabs" data-tab>
                    <li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
                    <li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
                    <li class="tab-title"><a href="#panel2-3">Tab 3</a></li>
                    <li class="tab-title"><a href="#panel2-4">Tab 4</a></li>
                  </ul>
                  <div class="tabs-content">
                    <div class="content active" id="panel2-1">
                      <p>First panel content goes here...</p>
                    </div>
                    <div class="content" id="panel2-2">
                      <p>Second panel content goes here...</p>
                    </div>
                    <div class="content" id="panel2-3">
                      <p>Third panel content goes here...</p>
                    </div>
                    <div class="content" id="panel2-4">
                      <p>Fourth panel content goes here...</p>
                    </div>
                  </div>

And my error has changed to

TypeError: $(...).foundation is not a function

$(document).foundation();

Here is the script I'm using at the end of my html:



$(document).foundation();

Thanks for all your help!

Lyn over 5 years ago

Hey there Htet Htet Aung,

Are you sure you did not forget to include jquery in your page ?

Regards,

Lyn.

Htet Htet Aung over 5 years ago

It's working on the page now. You are right, I was missing foundation.min.js in my list of files.

Thanks!