Using '$' instead of 'jQuery' in WordPress

Question

jQuery included with WordPress is in compatibility mode. To avoid conflicts with other libraries we can not use the $ shortcut for jQuery. To use the $ sign we use:

jQuery(document).ready(function($) {
    $('#myid').css({'background': 'black', 'color': 'white'});
});

This works. But my question is how to do the same with window load. I have been facing this problem since last few projects. So, thought better to make the concept clear.

jQuery(window).load(function($) {
    $('#myid').css({'background': 'black', 'color': 'white'});
});

With this I get an error that says : $ is not a function. So, I'm unable to use $ inside of the window.load code block. Can anyone help how I can use the $ shortcut inside window.load?

Community · Accepted Answer · 2017-05-23 10:27:26Z

9

It's called no conflict mode, and not compatibility mode. To get this working, you have to use a closure or IIFE then, only ready states passes the jQuery object as parameter, load and others will not do this.

(function($) {
    $(window).load(function() {
        $('#myid').css({'background': 'black', 'color': 'white'});
    });
})(jQuery)

If your load is already inside a ready state you can use it directly too (just as example, you should not put a window load inside a ready state in general):

jQuery(function($) {
    $(window).load(function() {
        $('#myid').css({'background': 'black', 'color': 'white'});
    });
});

And note that .load() for such task is deprecated! You should use .on() instead.

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Sep 27, 2016 at 8:50

eisbehr

12.5k8 gold badges42 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using '$' instead of 'jQuery' in WordPress

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related