38

I know that jQuery is loaded, because I can switch out the $ for 'jQuery' and everything behaves as expected, but this will be a messy script if I can't fix this

This script:

jQuery(document).ready(function(){
    $("ul.vimeo_desc_feed li a").click(function(){
        alert($(this).attr('href'));
        return false;
    })
});

Produces the error $ is not a function

This script:

jQuery(document).ready(function(){
    jQuery("ul.vimeo_desc_feed li a").click(function(){
        alert(jQuery(this).attr('href'));
        return false;
    })
});

works fine.

0

3 Answers 3

51

You can wrap your javascript inside a self-invoking function, then pass jQuery as an argument to it, using $ as the local variable name. For example:

(function($) {
  $(document).ready(function(){
    $("ul.vimeo_desc_feed li a").click(function(){
      alert($(this).attr('href'));
      return false;
    })
 });
}(jQuery));

should work as intended.

If I remember correctly the WP-supplied version of jQuery (the one you get if you wp_enqueue_script('jquery')) puts jQuery in no-conflict immediately, causing $ to be undefined.

3
  • aah, I see. I used to add it by hand, which explains why I have not come across this issue.
    – Mild Fuzz
    Oct 14, 2010 at 15:46
  • Thank you, I was using the alternate format with jQuery at the beginning instead of end.. but couldn't figure out how to return a value, with this format I just added return before the self-invoking function, and it works.
    – eselk
    Jan 15, 2015 at 18:08
  • Very useful answer.
    – MarkSkayff
    Nov 1, 2017 at 20:04
32

You're almost there!

jQuery(document).ready(function($){
    $("ul.vimeo_desc_feed li a").click(function(){
        alert($(this).attr('href'));
        return false;
    })

});

You have to pass a reference to jQuery as the $ function into your method or it won't work. If you just place a $ inside the first function() call as I did above, things will be working just fine.

4
  • 4
    +1: That is more readable than putting jQueryat the end.
    – fuxia
    Oct 14, 2010 at 17:42
  • 1
    ...but it isn't the standard way of doing an anonymous function. forum.jquery.com/topic/jquery-anonymous-function-calls
    – BryanH
    Oct 14, 2010 at 23:55
  • 5
    Yes and no. They're both considered "standard" ways of doing it. One creates a singleton class that has $ defined locally. The other just defines a handler for the document's ready event and passes the jQuery object into the handler as $. If you're trying to hook on to the ready event, the second method is more widely used. If you need jQuery for any other purpose (to hook on to $.browser for example), you'd use a singleton class.
    – EAMann
    Oct 15, 2010 at 1:39
  • +1 for jQuery(document).ready(function($){... mor infos about jquery and WordPress can you also read on my post: wpengineer.com/2028/small-tips-using-wordpress-and-jquery .
    – bueltge
    Oct 15, 2010 at 12:46
6

Passing a function to jQuery is shorthand for $(document).ready(...) then by placing $ as the first parameter of your callback, you create an alias for jQuery within that callback:

jQuery(function($) {
    $("ul.vimeo_desc_feed li a").click(function(){
        alert($(this).attr('href'));
        return false;
    });
});

You can see the documentation for this here.

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