Internet Explorer and jQuery issues

Question

I have a script that works in Firefox, Safari, and Chrome. It just doesn't work in Internet Explorer for whatever reason. The code is fairly simple:

<script type="text/javascript">
(function( $ ){

    $.fn.tabSwap = function() {

        return this.each(function() {
            $('.current').removeClass('current');
            $(this).addClass('current');
        });

    };

})( jQuery );
</script>

On a fairly simplified page (posted by Roatin Marth) the code worked just fine in IE 6 and IE 8. On my webpage the code does not work at all in Internet Explorer.

I tried executing the following simple code:

<script type="text/javascript">
    $('#statistics').tabSwap();
</script>

I get the following error:

Object doesn't support this property or method

index.html line: 77

code: 0 char: 2

URI: ...

The link to my webpage is:

http://examples.chikachu.com/calculators

Any ideas what's wrong?

Works fine: http://jsbin.com/ulaho#noedit (tested in IE6). What are you seeing? — Roatin Marth, Oct 26 '10 at 17:32
@Roatin Huh... the link you sent me worked in IE8. There must be something further with my site that's complicating it. I'll upload my website, re-test, and post a link if it still doesn't work. — stevendesu, Oct 26 '10 at 17:46
See http://stackoverflow.com/questions/69913/why-dont-self-closing-script-tags-work — Crescent Fresh, Oct 26 '10 at 18:29
@Crescent That fixed the problem, thank you =) Please post as an answer so I can mark it as accepted answer. — stevendesu, Oct 28 '10 at 12:23

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1

Answer was posted by Crescent Fresh, but he isn't posting it as an answer so I can accept it. The problem on my site was improper closing of the <script> tag used to include the jQuery framework.

More specifically, this issue.

edited May 23 '17 at 11:56

Community

1
1

answered Oct 29 '10 at 19:45

stevendesu

15,753
22
105
182

Fosco · Answer 2 · 2010-10-26T19:50:31.200

0

As a replacement for the JS you listed at the top, try this:

<script type="text/javascript">
jQuery.fn.tabSwap = function() {

        return this.each(function() {
            $('.current').removeClass('current');
            $(this).addClass('current');
        });

};    

$(document).ready(function() {
        $('#tabTwo').tabSwap();
});
</script>

edited Oct 26 '10 at 19:50

answered Oct 26 '10 at 17:27

Fosco

38,138
7
87
101

You shouldn't declare plugins inside a `document.ready` handler. – Nick Craver Oct 26 '10 at 17:27
When I tried this, nothing happened. No errors, but the tab never swapped (in IE). – stevendesu Oct 26 '10 at 17:40
@steven_desu I updated the answer.. I was able to make this work at your example website using the chrome console. – Fosco Oct 26 '10 at 19:50
Problem: It worked in Chrome. It didn't work in IE. Crescent Fresh found the issue. I'm just waiting for him to post in answer form so I can accept it. – stevendesu Oct 28 '10 at 13:56

score 0 · Answer 3 · answered Oct 26 '10 at 17:30

0

Your plugin is not instantiated when you call it in IE -- try wrapping the call for your plugin in $() to make sure the DOM is ready (which theoretically should mean that your plugin has been downloaded and parsed [and therefore registered with jQuery.])

So change:

<script type="text/javascript">
    $('#tabTwo').tabSwap();
</script>

to

<script type="text/javascript">
    $(function() { 
        $('#tabTwo').tabSwap(); 
    });
</script>

answered Oct 26 '10 at 17:30

Sean Vieira

155,703
32
311
293

This method threw the same error as before, only it threw the error twice. – stevendesu Oct 26 '10 at 17:42

Internet Explorer and jQuery issues

3 Answers3