Loading jQuery on-the-fly
Question
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?
3 answers
solution1
3 2012-01-06 19:54:43
"$ 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/
solution2
2 2012-01-06 19:56:48
"$ 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">
solution3
0 ACCPTED 2012-01-11 19:46:01
With help of one my friend, found what is the problem with above code.
When the document.ready runs, jquery is not on the page (there are two onReady elements running)… and since the addToHead version is non-blocking, the rest of the javascript executes in parallel and fails.
I added this just after the body tag starts and it works fine:
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write('<scr'+'ipt type="text/javascript" src="http://ajax.googleapis.com /ajax/libs/jquery/1.7.1/jquery.min.js">'+'</scr'+'ipt>');
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.