I can't figure out what is wrong with my code here. I am trying to load jQuery dynamically if it is not present on the page.
<head>
<script>
(function() {
if (typeof jQuery != 'undefined') {
/* jQuery is already loaded... verify minimum version number of 1.4.2 and reload newer if needed */
if (/1\.(0|1|2|3|4)\.(0|1)/.test(jQuery.fn.jquery) || /^1.1/.test(jQuery.fn.jquery) || /^1.2/.test(jQuery.fn.jquery)|| /^1.3/.test(jQuery.fn.jquery)) {
loadJQ();
}
} else {
loadJQ();
}
function loadJQ() {
/* adds a link to jQuery to the head, instead of inline, so it validates */
var headElement = document.getElementsByTagName("head")[0];
linkElement=document.createElement("script");
linkElement.src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
linkElement.type="text/javascript";
headElement.appendChild(linkElement);
//alert(headElement);
}
})();
</script>
</head>
This is my body.
<body>
<button>Click me</button>
<script type="text/javascript">
$(document).ready(function(){
alert("hello");
$("button").click(function(){
$(this).hide();
});
});
</script>
</body>
When I put this in a html page I get an error saying that "$ is not defined". Anyone has any idea why?
"$ is not defined" error means that jquery is not loaded.
Try this script to load the jquery.
http://css-tricks.com/snippets/jquery/load-jquery-only-if-not-present/
"$ is not defined" error results from jQuery code not being downloaded by the time the script tries to execute.
You can try using the Script attribute defer to delay the execution of your code until it is loaded by changing the script tag to
<script type="text/javascript" defer="defer">
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