It's a JSLint/JSHint issue. It's an implicit global so you have to instruct the linter that it's ok.
Add /* global $ */
above your code and the warnings will disappear.
Question
I use plnkr.co to test a jQuery animation, but the editor gives a "$ is not defined" error on the lines that starts with $... What is wrong? As normal files on my computer this works fine...
jQuery is loaded (together with other bootstrap, as set up by Plunker):
<head>
<meta charset="utf-8" />
<title></title>
<link data-require="bootstrap-css@3.0.0-rc2" data-semver="3.0.0-rc2" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@3.0.0-rc2" data-semver="3.0.0-rc2" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
And then script.js has:
$(function() {
$('.toggle-button').click(function (el) {
console.log("Klikk!");
$('#search-form').toggle(duration);
$('#add-form').toggle(duration);
el.preventDefault();
});
});
Here it is http://plnkr.co/edit/azhaoBjlGYX1xGV5JVLS?p=preview See script.js and the lines with the yellow warning signs.
La solution
It's a JSLint/JSHint issue. It's an implicit global so you have to instruct the linter that it's ok.
Add /* global $ */
above your code and the warnings will disappear.