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

1 Views

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.

Read More

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

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. 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");
    });

});

  2. 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> 

  3.     <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>