javascript - jQuery/Foundation: Uncaught TypeError: Object #<Object> has no method 'hover' -
the following code (foundation 4, jquery)
<script> $(document).ready(function(){ $("#important img").hover(function() { alert(""); }); }); </script> </body> gives following error:
uncaught typeerror: object # has no method 'hover'
usually error caused missing $ not in case?
edit: here's how foundation 4 html looks @ end of body:
<script> document.write('<script src=' + ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') + '.js><\/script>') </script> <script src="js/foundation.min.js"></script> <script src="js/foundation/foundation.js"></script> <script src="js/foundation/foundation.alerts.js"></script> <script src="js/foundation/foundation.clearing.js"></script> <script src="js/foundation/foundation.cookie.js"></script> <script src="js/foundation/foundation.dropdown.js"></script> <script src="js/foundation/foundation.forms.js"></script> <script src="js/foundation/foundation.joyride.js"></script> <script src="js/foundation/foundation.magellan.js"></script> <script src="js/foundation/foundation.orbit.js"></script> <script src="js/foundation/foundation.placeholder.js"></script> <script src="js/foundation/foundation.reveal.js"></script> <script src="js/foundation/foundation.section.js"></script> <script src="js/foundation/foundation.tooltips.js"></script> <script src="js/foundation/foundation.topbar.js"></script> <script> $(document).foundation(); </script> edit 2: solution
solved including jquery in head:
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>lorem ipsum</title> <link rel="stylesheet" href="css/foundation.min.css" /> <script src="js/vendor/jquery.js"></script> <script src="js/vendor/custom.modernizr.js"></script> the actual jquery code same:
<script> $(document).ready(function(){ $("#important img").hover(function() { alert(""); }); }); </script> </body>
some other library might use $, meaning it's possibly overwriting jquery's $ instance. because of that, when use $, it's referring other library, doesn't seem have .hover() method.
you can either use jquery instead of $ reference jquery library, or use jquery.noconflict(); make jquery library accessible in different variable - http://api.jquery.com/jquery.noconflict/
of course, make sure include jquery library on page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> otherwise jquery won't defined.
Comments
Post a Comment