CODEWITHSUNDEEP
jqueryhtmlwordpress
Radek
Radek

Reputation: 11121

How to fix "TypeError: $ is not a function" error in WordPress custom page?

I created custom WordPress page via plugin where I want to toggle on/off comments using this code

<script type="text/javascript">                 
  $("comment_switch").click(function () {
    $("comments").toggleClass("hidden");
  });
</script>

I placed it inside the <body> tag. To generate <head> tag I used standard WordPress function wp_head();. When I check the source code of the page I can see in head section <script src="http://10.1.1.6/wp-includes/js/jquery/jquery.js?ver=1.10.2" type="text/javascript"> which I thought would be enough to use jQuery.

Could someone help me to make the jQuery code work? The whole source code of the page could be found here

Upvotes: 7

Views: 72698

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206638

You're probably missing some . class markup and the DOM ready function

jQuery(function($) { // DOM is now ready and jQuery's $ alias sandboxed

    $(".comment_switch").on("click", function () {
        $(".comments").toggleClass("hidden");
    });

});

Upvotes: 31

hamza omar
hamza omar

Reputation: 9

    <script type="text/javascript">                 
 (function () { // 1) remove the "$"
   $(".comment_switch").click(function () { // 2) add "." if this a class or "#" // if it is an id
    $(".comments").toggleClass("hidden");
  });
});
</script>

Upvotes: -2

DevZer0
DevZer0

Reputation: 13535

you need to encapsulate your javascript in function that executes on DOM ready event

<script type="text/javascript">                 
 $(function () {
   $("comment_switch").click(function () {
    $("comments").toggleClass("hidden");
  });
});
</script>

Upvotes: -2

Related Questions