Menu
I am a beginner learning jQuery and web development, so this may be a dumb question, but I cannot find an answer to this on Google (probably I'm not searching for the right keywords). I have a simple HTML file (say, 'test.html' that loads jQuery, an external javascript file (say, 'test.js') that I wrote, and have a button in it. For example,
<html>
....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="scripts/test.js" type="text/javascript"></script>
....
<body>
<button type="button" class="button" id="my_button">test</button>
</body>
</html>
In 'test.js', I have:
$( "#my_button" ).click(function() {
alert('test');
return false;
});
But when I click on the button, it doesn't work. However, when I put what's in 'test.js' in 'test.html' like this:
<html>
....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#my_button" ).click(function() {
alert('test');
return false;
});
});
</script>
....
<body>
<button type="button" class="button" id="my_button">test</button>
</body>
</html>
It works. First question is: Can someone explain me why it would work when I insert the code in external file and load it? Is that always necessary to wrap jQuery code with $(function() {......} for it to work?
Ideally, I don't want javascript code in my HTML template because it's obviously messy. Related/second question is: What is the cleanest/best way to separate the javascript/jQuery code like above and yet make it work in the intended HTML template?
Thank you for your answer.
431
you can make use of both in one file. jQuery is javascript, and you can mix jQuery calls and pure Javascript as you wish, provided you are careful about the objects you are working with.
You should put your JS code in a separate file because this makes it easier to test and develop. The question of how you serve the code is a different matter. Serving the HTML and the JS separately has the advantage that a client can cache the JS.
Update Mouse Drivers It's prudent to make sure your mouse drivers are always up-to-date. If the left click isn't working, you definitely need to check them. Right-click on the Start Menu and then choose Device Manager.
So a jQuery function, which is prefixed with the $ or the word jQuery generally is called from within that method. $(document). ready(function() { // Assign all list items on the page to be the color red. // This does not work until AFTER the entire DOM is "ready", hence the $(document).ready() $('li').
$(document).ready(function() {
$( "#my_button" ).click(function() {
alert('test');
return false;
});
});
You need to have $(function() { ... }) for your click function to work. It tells jquery that the document is loaded and it can start working on the DOM. Before then, the DOM is not ready and your element might not exist.
EDIT: Use this for your external files too, unless you are more advanced and know when NOT to use it.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
