jQuery.noConflict and how to use it

Question

i try to use jQuery.noConflict() but in window.load function i get a "$ is not a function" error.

my code:

jQuery.noConflict();

jQuery(document).ready(function($) {
    /** Dropdown Menu **/
    $('ul.tabs li:has(ul)').bind("click", function() {
        $(this).find('ul').show('normal');
        //event.stopPropagation();
    });
    $('ul.tabs li').bind("mouseleave", function() {
        $(this).find('ul').hide('normal');
        //event.stopPropagation();
    });
});

jQuery(window).load(function($) {
    $('#container').fadeIn('normal');
});

if i use jQuery instead of '$' it works fine, but is it possible to continue use the '$'?
anyone knows/understand what is wrong with this?
thanks!

Answer 1

The first part of your code works because jQuery's $ object is always passed to ready handlers. However, the same behavior does not apply to the load handlers.

If you do not want to replace $ with jQuery in the body of your load handler, you can capture that variable in a closure:

(function($) {
    $(window).load(function() {
        $("#container").fadeIn("normal");
    });
})(jQuery);

Alternatively, you can register your load handler inside your ready handler, where $ is correctly bound.