The following code (Foundation 4, jQuery)
<script>
$(document).ready(function(){
$("#important img").hover(function() {
alert("");
});
});
</script>
</body>
Gives the following error:
Uncaught TypeError: Object # has no method 'hover'
Usually this error is caused by a missing $ but not in this case?
EDIT: here's how the foundation 4 html looks like at the 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 this by including jQuery in the 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 is the same:
<script>
$(document).ready(function(){
$("#important img").hover(function() {
alert("");
});
});
</script>
</body>