0

I am having trouble with several jQuery plugins that add to jQuery.prototype ($.fn) not working in Internet Explorer 11 until after a page refresh. I believe the following illustrates the source of the trouble:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>foobar</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
    var outside_jQuery = jQuery();
    jQuery.prototype.foo = function(){};

    $('pre').append('foo in outside_jQuery on load? '
        + ('foo' in outside_jQuery).toString());

    $('input').on('click', function(){
        $('pre').append('\nfoo in outside_jQuery on click? '
            + ('foo' in outside_jQuery).toString());
        $('pre').append('\nfoo in jQuery() on click? '
            + ('foo' in jQuery()).toString());
    });
});
</script>
</head>
<body>
<input type="button" value="foo?" />
<pre></pre>
</body>
</html>

In Firefox 26, after clicking the button the output is as follows, as expected:

foo in outside_jQuery on load? true
foo in outside_jQuery on click? true
foo in jQuery() on click? true

In Internet Explorer 11, after clicking the button the output is as follows:

foo in outside_jQuery on load? true
foo in outside_jQuery on click? true
foo in jQuery() on click? false

However, after refreshing the page once, it works as expected.

It seems like the changes to jQuery.prototype are not reflected in new jQuery objects created within the event handler, until after a page refresh. Why?

Avalanche
  • 101
  • 4
  • Reason why you are not using `jQuery.fn`? – epascarello Jan 30 '14 at 02:24
  • 1
    I believe [jQuery.fn is just an alias for jQuery.prototype](http://stackoverflow.com/questions/4083351/what-does-jquery-fn-mean), but for the purpose of asking this question prototype sounded more meaningful than fn. – Avalanche Jan 30 '14 at 02:28
  • 1
    Sorry for my spam comment, but because `ie` is **KNOWN** as a terrible, inconsistent browser...? – Nicholas Hazel Jan 30 '14 at 02:29
  • It is a alias, but it is the standard way of building jQuery plugins. – epascarello Jan 30 '14 at 02:43
  • Then do you think changing the title and code from jQuery.prototype to jQuery.fn will aid others in understanding the question? – Avalanche Jan 30 '14 at 02:48
  • If you wipe the cache, does it make the difference? If you move the prototype outside of the onready, does it make a difference? – epascarello Jan 30 '14 at 02:49
  • I just tested both of those things and in both cases it did not make a difference. Also this issue affects high-profile plugins like jQuery UI and fancyBox which is how I discovered it. – Avalanche Jan 30 '14 at 02:54
  • `jQuery()` returns a new object instanceof jQuery, not the jQuery Function Object itself. but you likely don't need neither the outside_... nor the .prototype, just assign `jQuery.fn.extension = `; it also makes no sense to do this inside of jQuery.ready, do it before, right after the script include – metadings Jan 30 '14 at 19:26
  • jQuery.fn is an alias for jQuery.prototype, which should modify the prototype of all jQuery objects. The reason I have outside_jQuery is to illustrate that the prototype is indeed modified for jQuery objects outside the handler, but for new jQuery objects created in the handler it is not working until a page refresh in IE. – Avalanche Jan 30 '14 at 19:30

0 Answers0