59

The 1st snippet wasn't working. However, it start working when replacing all $(dollar sign) with jQuery(See 2nd snippet). But i don't really understant why? Can anyone explain this to me? Many thanks!

1st Snippet

jQuery.noConflict();
               $(document).ready(function(){    
                    $("#insideTable > tbody > tr:odd").addClass("odd");
                    $("#insideTable > tbody > tr:not(.odd)").hide();
                    $("#insideTable > tbody > tr:odd").show();
                    $("#insideTable > tbody > tr.odd").click(function(){
                        $(this).next().toggle();
                        $(this).find(".arrow").toggleClass("up");
                    });

                });

2nd Snippet

        jQuery.noConflict();
        jQuery(document).ready(function(){

                jQuery("#insideTable > tbody > tr:odd").addClass("odd");
                jQuery("#insideTable > tbody > tr:not(.odd)").hide();
                jQuery("#insideTable > tbody > tr:odd").show();
                jQuery("#insideTable > tbody > tr.odd").click(function(){
                    jQuery(this).next().toggle();
                    jQuery(this).find(".arrow").toggleClass("up");
                });

            });
0

2 Answers 2

109

This is because jQuery.noConflict() "frees" the "$" from being associated with jQuery. Normally in your code you can use $ as a replacement for "jQuery". If you use noConflict() you can't do that anymore and so you have to replace each "$" with "jQuery"; .

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict():

you can also create a totally new alias to use

var myJqueryAlias = jQuery.noConflict();
myJqueryAlias(document).ready(function(){

        myJqueryAlias("#insideTable > tbody > tr:odd").addClass("odd");
        myJqueryAlias("#insideTable > tbody > tr:not(.odd)").hide();
        myJqueryAlias("#insideTable > tbody > tr:odd").show();
        myJqueryAlias("#insideTable > tbody > tr.odd").click(function(){
            myJqueryAlias(this).next().toggle();
            myJqueryAlias(this).find(".arrow").toggleClass("up");
        });

    });
1
  • 18
    This works, just want to point out that the first argument passed to a ready callback is the jQuery object, so you can do .ready(function($){ and then use $ inside the function, as long as you don't need to use the outer $ for stuff. Jun 8, 2012 at 20:20
14

Calling noConflict() removes the association between the $ and the jQuery function. This is so that you can use another JavaScript library that also shortens to $ without conflicts.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.