'$ is undefined' error, but 'jQuery' works

Question

I have these lines of code which is the cause of an error message. It seems to me that there is no mistake in the code, but I guess I'm wrong:

jQuery(document).ready(function() {
  console.log("ready!");

  $("#hover-table").hover(function() { // THIS IS LINE 164    
    $('#table-wrapper').show();
  }, function() {
    $('#table-wrapper').hide();
  });
});

I get this error message in the Chrome console. The console.log is printed with no problem.

(index):164 Uncaught TypeError: $ is not a function
at HTMLDocument. ((index):164)
at i (jquery.js?ver=1.12.4:2)
at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
at Function.ready (jquery.js?ver=1.12.4:2)
at HTMLDocument.K (jquery.js?ver=1.12.4:2)

What am I missing here?

looks like you have changed your $ to jQuery - might be because of a no conflict? See this post: stackoverflow.com/questions/6746352/… — Pete
– Pete, Commented Sep 12, 2018 at 11:48
@Mohammad Without loading jQuery the error would be Uncaught TypeError: jQuery is not a function! — Ram
– Ram, Commented Sep 12, 2018 at 11:52
1) conflicting libraries or 2) some earlier JavaScript breaks, resulting in the following JavaScript to break. — Martin
– Martin, Commented Sep 12, 2018 at 12:06

Zakaria Acharki · Accepted Answer · 2018-09-12 14:02:50Z

5

It may that another library using the dollar sign instead of jQuery what will create this conflict so you could replace all the dollars signs $ with jQuery like :

<script>
    jQuery(document).ready(function() {
        console.log("ready!");

        jQuery("#hover-table").hover(function() { // THIS IS THE LINE 164---
            jQuery('#table-wrapper').show();
        }, function() {
            jQuery('#table-wrapper').hide();
        });
    }); 
</script>

Or also you could define it for inside-block use like :

jQuery(document).ready(function($){
    //You can now use $ as your jQuery object.
});

edited Sep 12, 2018 at 14:02

answered Sep 12, 2018 at 11:48

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun Kumar · Accepted Answer · 2018-09-12 11:50:22Z

2

Try with below code, looks like you have changed the $ to jQuery

<script> 
jQuery(document).ready(function(){
   console.log( "ready!" );
   jQuery("#hover-table").hover(function(){ // THIS IS THE LINE 164---
     jQuery('#table-wrapper').show();
   },function(){
     jQuery('#table-wrapper').hide();
  });
 }); 
</script>

answered Sep 12, 2018 at 11:50

Arun Kumar

8955 silver badges12 bronze badges

Collectives™ on Stack Overflow

'$ is undefined' error, but 'jQuery' works

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related