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?

Answer 1

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>

Answer 2

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>

Answer 3

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.