Pass Jquery alias into javascript function

Question

Im creating a theme for wordpress and I need to use some jQuery. Ive found bits of code online and ive made a few bits myself. However, when using jQuery provided by wordpress it is in noConflict mode and instead of using $ it is set to "jQuery". That is fine but I dont want to have to modify all my code and any code I find online to use "jQuery" instead of $.

So it tells me that by placeing function ($) at the end you are able to use the $ as the jQuery alias, but only in that functions scope. That is fine, but I was hoping that it would work and pass through to the functions I call from inside that scope. That is where my problem is. How can I make the jQuery code that uses $ inside my "resizeandcenter" function work.

jQuery('.artworklist > li > a > img').load(function ($){
   resizeitems('artworklist');
});

This is my function that I want to be able to use the $ inside as I dont want to have to modify all my code / and any code I find online.

function resizeitems(elementname){
    //Do some jquery stuff using $
}

Perhaps there is an alternative way to do what I am doing or I am doing it wrong?

EDIT:

My function "resizeitems" is on its own in a js file thats included in my page header.

The other code, the jQuery code in my first code block is at the bottom of the page in a script block.

So im a bit unsure about the answer saying to wrap my function?

stackoverflow.com/about

Xotic750
– Xotic750

2013-05-11 09:21:59 +00:00
Commented May 11, 2013 at 9:21 — Xotic750
– Xotic750, Commented May 11, 2013 at 9:21

Community · Accepted Answer · 2017-05-23 12:13:04Z

1

You can wrap your entire code in a self executing closure (or an on ready/load closure) like this

(function ($) {
    // do your stuff here
}(jQuery));

Then you can use $ within that closure

Here is an example on jsfiddle for you

window.addEventListener("load", function () {
    (function ($jq) {
        $jq("body").append($jq("<div>").text("hello"));
    }(jQuery));
}, false);

Here is an example using jquery's ready event listener

jQuery(document).ready(function() {
    (function ($jq) {
        $jq("body").append($jq("<div>").text("hello"));
    }(jQuery));
});

On jsfiddle

Or a further alternative in jquery, mostly syntax change, as suggested by @Mathletics

jQuery(function($jq) {
      $jq("body").append($jq("<div>").text("hello"));
});

On jsfiddle

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered May 10, 2013 at 17:18

Xotic750

23.6k8 gold badges59 silver badges81 bronze badges

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

9 Comments

Dave Thieben Over a year ago

This is the correct way to use an immediately invoked functional expression (IIFE)

binarysmacker Over a year ago

Hi, I have seen a few bits like this before but I really cant see or understand how to use it in my case.

Evan Davis Over a year ago

I think you're throwing OP off by switching up the example event binding.

binarysmacker Over a year ago

So I would stick my functions inside (function ($) { // do your stuff here }(jQuery)); and then I can still call the functions as normal etc?

Xotic750 Over a year ago

@binarysmacker because I do not have enough information to advise the exact solution for your situation, I would suggest using the self executing closure first, if it doesn't work then you will most likely need to wait until the DOM is loaded, by using the ´load´ event or jquery's ´ready´ event binding.

|

Evan Davis · Accepted Answer · 2013-05-10 17:31:34Z

0

You need to pass jQuery into the top-level closure containing your code. Usually this is inside the $(document).ready() call. A basic example looks like this:

jQuery(function($) {
      function resizeitems(elementname){
          //Do some jquery stuff using $
      }
      $('.artworklist > li > a > img').load(function (){
          resizeitems('artworklist');
      });
});

jQuery is now aliased to $ inside of that closure.

edited May 10, 2013 at 17:31

answered May 10, 2013 at 17:17

Evan Davis

36.7k7 gold badges53 silver badges58 bronze badges

2 Comments

binarysmacker Over a year ago

I dont have a top level closure. The jQuery('.artworklist > li > a > img').load(function ($){ block is directly after my <script> tag. The function resizeandcenter is just in its own js file and is included in the header

Evan Davis Over a year ago

Why not put all the code in one file, and wrap it as I've described?

Tomas Kirda · Accepted Answer · 2013-05-10 17:18:15Z

0

All what matter is scope here. If your other functions are in some other scope you can just remap global jQuery to $ in that scope, so that you don't have to change the code.

var $ = jQuery;

You can even set it in global scope, but you may affect other usage of $ on the page if it was used for something else:

window.$ = jQuery;

answered May 10, 2013 at 17:18

Tomas Kirda

8,4233 gold badges33 silver badges24 bronze badges

3 Comments

binarysmacker Over a year ago

This works! But this means that any kind of function or code I write I need to include this line at the top? I was hoping for some kind of method where I would not have to modify or add and extra code, maybe it doesnt exist?

Xotic750 Over a year ago

The question here would be, why did they make it noConflict? Perhaps $ is already used for something else, and this would just overwrite it breaking the web page.

Tomas Kirda Over a year ago

It is good practice to use some scope all the time and not to pollute global scope. So if scoped correctly you will need to define this only one time for the whole scope.

Collectives™ on Stack Overflow

Pass Jquery alias into javascript function

3 Answers 3

9 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related