jQuery Migrate

As of jQuery 4.0.0, data objects returned by jQuery.data() or jQuery.fn.data() no longer inherit from Object.prototype. This means properties like __proto__ or hasOwnProperty are not available on the data object itself.

Solution: Use Object.hasOwn() or Object.prototype.hasOwnProperty.call() to check for properties.

Example:

• Instead of jQuery.data( node ).hasOwnProperty( "foo" )
• Use Object.hasOwn( jQuery.data( node ), "foo" ) (modern)
• Or Object.prototype.hasOwnProperty.call( jQuery.data( node ), "foo" ) (for IE 11 support).

Prior to jQuery 4.0, .attr( name, value ) with a non-false/non-null value would set the attribute to its name (e.g., checked). jQuery 4.0 removes this behavior. Additionally, .attr( name ) no longer returns the name lowercased for boolean attributes.

Solutions:

• Setting attributes: Always set boolean attributes to their names explicitly using .attr( name, name ), native .setAttribute( name, name ), or HTML <input checked="checked">.
• Getting attributes: Avoid using .attr( name ) to check boolean attributes; use .prop( name ) instead.

jQuery Migrate provides two versions to suit different environments:

• Development (uncompressed) version: Generates console warning messages whenever compatibility issues are detected. This is intended for developers to identify and fix code during migration.
• Production (compressed) version: Does not generate warnings. Use this version in production environments to maintain compatibility without cluttering the console or impacting performance with unnecessary logging.

Note: Warnings are printed as console.warn for removed APIs (which must be fixed for the code to work without the plugin) and as console.info for deprecated APIs (which are still supported but should be updated).

To use jQuery Migrate, load the plugin script tag after the jQuery script tag in your web page.

<script src="https://code.jquery.com/jquery-4.0.0.js"></script>
<script src="https://code.jquery.com/jquery-migrate-4.0.2.js"></script>

Select the appropriate build based on your environment:

• Development version: Includes debugging features and generates console warnings for deprecated/removed APIs. Use this for development and debugging.
• Production version: Minified and does not generate console warnings. It only logs a message upon loading or if it detects an incompatible jQuery version. Use this for live sites.

The development version of the plugin displays warnings in the browser console. All warnings start with the string JQMIGRATE.

You can also programmatically inspect the warnings generated by your code by checking the jQuery.migrateMessages array.

Shorthand methods like .click(fn) are deprecated. You should use the more explicit .on() and .trigger() methods.

This applies to many event types, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu.

Solution:

• Instead of .click(fn), use .on("click", fn).
• Instead of .click(), use .trigger("click").

This error occurs when the page either has no jQuery installed, or is using a version of jQuery that is incompatible with this specific version of the Migrate plugin (specifically, versions older than 4.0.0 or 5.0.0 and newer).

Solution: Ensure you are using a supported version of jQuery as specified in the project README.

The jQuery.holdReady() method is deprecated because it can negatively impact global page performance by preventing all code on the page from initializing for extended periods.

Solution: Rewrite the page logic so that it does not require delaying all jQuery ready handlers. A common approach is to late-load only the specific code that requires a delay when it is safe to run.

Note: jQuery Migrate does not provide a polyfill for holdReady(). If the underlying jQuery version no longer contains this method, your code will fail.

The methods jQuery.fn.bind(), jQuery.fn.unbind(), jQuery.fn.delegate(), and jQuery.fn.undelegate() are deprecated in favor of .on() and .off(). While they still work in jQuery 4.x, they may be removed in future major versions.

Solution: Use .on() and .off() for both direct and delegated event binding.

For simple direct bindings, you can often rename the methods directly because the argument orders are identical:

• Replace .bind() with .on()
• Replace .unbind() with .off()

In jQuery 4.x, calling .attr( name, false ) on a non-ARIA, non-boolean attribute will remove the attribute entirely. In previous versions, it would set the attribute value to the string "false".

Solution: If you intend to set the attribute value to the string "false", wrap it in quotes: .attr( name, "false" ).