Essentially, there is no "internal" or "external" JavaScript code.
Your HTML code including "jquery-1.8.2.js makes your whole HTML invalid. It really belongs to your
<head> element, not so sure about "jq1.js". JavaScript code in all files is processed in the order it is included. If some file is processed later than some other file, all the declarations of the previously included in the previous file are taken into account.
It all happens as if all JavaScipt files were merged in one big file, with only on difference: the position of HTML code in this order. If a file is included in the
<head> element, the code cannot assume existing of any DOM elements, they don't exist at the moment of processing of this file. But the jQuery and jQuery-UI files are abstracted from concrete DOM, of course, so put them there. And the HTML document is fully complete only when the
document.ready event is invoked; this is what you actually do. See also:
http://learn.jquery.com/about-jquery/how-jquery-works.
Also note that there is no such concept as "call a file" ("jq1" in your case). You only call the JavaScript object of the 'function' type. All objects, including function objects, can be dynamically created from code, and it can happen later. The function object which can be statically created can be called in the fragment of code before function declaration. The object created dynamically (say, those having a member of the function type) should be created before the actual call.
Taking this into account should dismiss your concerns about "external" code.
Now,
the solution. Try this:
<html>
<head>
<title>Use correct HTML structure</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Scripts/jquery-1.8.2.js"></script>
<script src="Scripts/jq1.js"></script> <!--
</head>
<body>
<script>
$(document).ready(function () {
$("#album-list").click(function () { alert("test"); });
$("#target").click(function () {
alert("Handler for .click() called.");
});
});
</script>
<img id="album-list" src="Images/orderedList3.png" />
<div id="target">
Click here
</div>
</body>
</html>
Sorry, I did not test the operation, just restructured HTML. It looks correct to me. Please try.
—SA
Submit an article or tip