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.

Improve this question
0

3 Answers 3

Reset to default
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.

Improve this answer
3
  • aah, I see. I used to add it by hand, which explains why I have not come across this issue. Commented 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. Commented Jan 15, 2015 at 18:08
  • Very useful answer. Commented 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.

Improve this answer
4
  • 4
    +1: That is more readable than putting jQueryat the end. Commented 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 Commented 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. Commented 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 . Commented 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.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.