jQuery undefined function error with WP jQuery, but works with Google CDN

Question

I've been reading several articles dissuading WP developers from replacing the enqueued jQuery with the Google CDN version of jQuery. I'm sold.

I am now enqueueing the WP jQuery version which uses jQuery.noConflict().

However, I am getting the 'undefined is not a function' error in a home-grown .js file that uses $ selectors. Even when I change the selector to 'jQuery' I still get the error. I made sure that jquery is loaded prior to the .js file.

For testing, if I switch out the WP jQuery enqueue with Google CDN's version, I get no errors at all.

I want to be able to use WP's jQuery, but I can't seem to get it to work with the home-grown jquery code.

Any thoughts on other debugging ideas?

EDIT:

Here's a slice of the home-grown .js file that is failing:

var brk = {
    start: function($){

    $("#navigation ul li a").css("color", "#FFF").css("text-decoration", "none");
    $("#topButtons a.clearbtn").css("color", "#FFF").css("background", "transparent").css("border", "1px solid #FFF");
    }
}

jQuery(document).ready(brk.start($));

The 'undefined is not a function' error is on the first $ line: $("#navigation ul li a")...

Answer 1

Well, the short of it is that your code is incorrect.

jQuery(document).ready(brk.start($));

The $ here doesn't refer to anything. You should change this to:

jQuery(document).ready(function($) { brk.start($) } );

With noConflict mode enabled, the $ value is not defined. If you want it to be defined, then you have to define it yourself.

This code:

jQuery(document).ready(function($) {
...
});

Does a couple things.

First, it hooks a function to the document.ready event. Secondly, it defines a function to call. Third, it sets the $ value to be jQuery for the code inside that function.

Your code was not defining a function nor setting the $ value. You were trying to call brk.start with a parameter of $ and then attach whatever the return value of it was to the document.ready.

The brk.start(whatever) is a function call, not a function definition itself. You need to define a function to attach it to a document.ready event.

Alternatively, this might work. I have not tested it.

jQuery(document).ready(brk.start);

The brk.start, without the parentheses, is a function and so it can be referred to in this manner. Maybe.

Although honestly, if you don't want to attach the function call to document.ready and just want to call it in real time, then this would do the job:

brk.start(jQuery);

Answer 2

Use WP's noConflict version of jQuery. Then use your custom calls like this.

<script type="text/javascript">
  <!--
  jQuery(document).ready(function($) {

    $('#topmenu').toggle();

  });
  //-->
</script>

You can also use $ inside. That's what I do.