2

I'm looking at a piece of code I did not write which contains: 

jQuery(function($) {

$('#interaction').find('.item').hover(function() {
    var $this = $(this);
    $this.addClass('hover');
},
function() {
    var $this = $(this);
    $this.removeClass('hover');
})
.click(function() {
    var $this = $(this);
    var thisID = $this.attr('id');
    //hide all visiable detail pages
    resetpage($('.item-detail:visible'));

... etc.

Normally I would write my code to run inside of $(document).ready({ ... }); for example: 

$(document).ready({

    .click(function() {
        var $this = $(this);
        var thisID = $this.attr('id');
        //hide all visiable detail pages
        resetpage($('.item-detail:visible'));
        ... etc.

    }
});

What is the difference (if any) between these two ways of writing the function or can I use them interchangeably?

SouthCoaster
  • 51
  • 3
  • More information on domready method: http://stackoverflow.com/questions/10753306/why-readyhandler-is-not-recommended – Kevin B Jul 12 '12 at 22:13

1 Answers1

4

You can use them interchangeably. $ is shorthand for jQuery, and $(function(){..}) is shorthand for $(document).ready(function(){ });

Sometimes people use jQuery(function($){ }); because the $ symbol is used by another library, or conflicts with PHP on the server.

kero
  • 10,647
  • 5
  • 41
  • 51
ahren
  • 16,803
  • 5
  • 50
  • 70
  • Thank you. I asked my boss and she told me that we need to use jQuery function($){... when writing code here as the version of jQuery that is being used by the company's website was written by some 3rd party vendor and that is the what they want us to use instead of $(document).ready({... but she couldn't elaborate any further than that. – SouthCoaster Jul 12 '12 at 23:21
  • 1
    @SouthCoaster - then yes it's probably most definitely to avoid a conflict. Strange that you're using a version of jQuery edited by a third party vendor - generally any further additions/functionality should be just plugins. – ahren Jul 12 '12 at 23:25
  • Yeah I thought that as well and apparently it's a really old version too (I think a custom build of 1.4.x). So the new image carousel I just implemented that uses CSS3 transforms has some code in it that apparently doesn't work with that older version and we can't upgrade so I'm going to have to get them to include/link to a current version AS WELL AS their old one as they dont want to just upgrade as that will entail extensive site-wide QA testing. lame... – SouthCoaster Jul 13 '12 at 00:06
  • @SouthCoaster - try not to include two versions of jQuery - this can cause serious headaches. I guess your only option is to use further plugins that are compatible with 1.4.x. – ahren Jul 13 '12 at 00:09
  • Yes in the end it has been decided we can only use code compatible with 1.4.1 (the version of jQuery our custom version was created from). This meant redesigning the carousel I had just implemented to use `.bind` instead of `.on` and for the script to be called in the page using `JQuery(function($){});` but now it seem to be working fine. – SouthCoaster Jul 13 '12 at 22:28