jQuery Migrate late load event binding test

diff --git a/src/event.js b/src/event.js index bdb06479..238c6257 100644 --- a/src/event.js +++ b/src/event.js @@ -1,4 +1,5 @@ var oldLoad = jQuery.fn.load, + oldEventAdd = jQuery.event.add, originalFix = jQuery.event.fix; jQuery.event.props = []; @@ -35,6 +36,15 @@ jQuery.event.fix = function( originalEvent ) { return fixHook && fixHook.filter ? fixHook.filter( event, originalEvent ) : event; }; +jQuery.event.add = function( elem, types ) { + + // This misses the multiple-types case but that seems awfully rare + if ( elem === window && types === "load" && document.readyState === "complete" ) { + migrateWarn( "jQuery(window).on('load'...) called after load event occurred" ); + } + return oldEventAdd.apply( this, arguments ); +}; + jQuery.each( [ "load", "unload", "error" ], function( _, name ) { jQuery.fn[ name ] = function() { diff --git a/test/event-lateload.html b/test/event-lateload.html new file mode 100644 index 00000000..21b40a76 --- /dev/null +++ b/test/event-lateload.html @@ -0,0 +1,37 @@ + + + + + jQuery Migrate late load event binding test + + + + + + + + + +

+ + diff --git a/test/event.js b/test/event.js index 9c5f2035..e5b8a5e7 100644 --- a/test/event.js +++ b/test/event.js @@ -145,3 +145,12 @@ TestManager.runIframeTest( "jQuery.event.fixHooks", "event-fixHooks.html", assert.equal( jQuery.migrateWarnings.length, 2, "warnings: " + JSON.stringify( jQuery.migrateWarnings ) ); } ); + +TestManager.runIframeTest( "Load within a ready handler", "event-lateload.html", + function( assert, jQuery, window, document, log ) { + assert.expect( 2 ); + + assert.equal( jQuery.migrateWarnings.length, 1, "warnings: " + + JSON.stringify( jQuery.migrateWarnings ) ); + assert.ok( /load/.test( jQuery.migrateWarnings[ 0 ] ), "message ok" ); + } ); diff --git a/warnings.md b/warnings.md index ce989269..79232d23 100644 --- a/warnings.md +++ b/warnings.md @@ -193,3 +193,9 @@ See jQuery-ui [commit](https://github.com/jquery/jquery-ui/commit/c0093b599fcd58 **Cause:** The code on the page has used the `jQuery.event.props` or `jQuery.event.fixHooks` data structures. These were used in previous versions to affect the properties that are copied from the native event to the jQuery event each time an event is delivered, but they had the potential to create performance issues. Versions of jQuery Mobile before 1.5 make use of this API and require jQuery Migrate to run properly. **Solution:** The most popular use of these data structures are to add properties for touch or pointer events, and those properties are now supported by default with a newer high-performance approach in jQuery 3.0 that only retrieves the properties on first access. If you are using jQuery Mobile, check the [jquerymobile.com](https://jquerymobile.com) site for updates. If you are using plugins such as [pointerTouch](https://github.com/timmywil/jquery.event.pointertouch) or [touchHooks](https://github.com/aarongloege/jquery.touchHooks), simply remove them as they are no longer needed. + +### JQMIGRATE: jQuery(window).on('load'...) called after load event occurred + +**Cause:** The calling code has attempted to attach a `load` event to `window` after the page has already loaded. That means the handler will never run and so is probably not what the caller intended. This can occur when the event attachment is made too late, for example, in a jQuery ready handler. It can also occur when a file is loaded dynamically with jQuery after the page has loaded, for example using the `$.getScript()` method. + +**Solution:** If a function `fn` does not actually depend on all page assets being fully loaded, switch to a ready handler `$( fn )` which runs earlier and will aways run `fn` even if the script that contains the code loads long after the page has fully loaded. If `fn` actually does depend on the script being fully loaded, check `document.readyState`. If the value is `"complete"` run the function immediately, otherwise use `$(window).on( "load", fn )`.