jQuery No Conflict Mode for extra functions

Question

I'm sure this is a simple question, just can't seem to get it to work right.

I was having some conflicts with jQuery, so I used the aliasing feature mentioned in the official documentation.

jQuery(document).ready(function($){
  $('.loadmore').addClass('hidden'); // works fine!

  loadmore();

});

function loadmore(){
  $('.loadmore').addClass('hidden'); // doesn't work!
}

How do I get the aliasing to work for my code that I threw into functions for better organization and for the ability to reuse? I'm currently using jQuery instead of $ for everything due to the issue presented in the sample above. Thought I could save a few bits of data and use the alias that's shown in all the tutorials.

Answer 1

You can try this...

(function($) {

// Put all your jQuery here... and you can use $

})(jQuery);

Answer 2

In this case, you could pass $ to your function.

jQuery(document).ready(function($){
    $('.loadmore').addClass('hidden'); // works fine!

    loadmore($);

});

function loadmore($){
    $('.loadmore').addClass('hidden'); // should work fine too!
}

Answer 3

jQuery no conflict mode essentially sets the $ function to a different name, like so:

$('select something').doSomethingElse(); // Works
var $j = jQuery.noConfilct();
$('select something').doSomethingElse(); // Doesn't work
$j('select something').doSomethingElse(); // Works

If you don't want to use a name other than $ for jQuery you can do this:

(function ($) {
    $('selector').doSomething();
    $('another selector').doSomethingElse();
}(jQuery));

This makes jQuery = $, but only inside of the parenthesis, allows you work as usual, and never causes conflicts.