如何检查是否从外部JS文件加载了jquery?

时间:2016-09-30 06:13:23

标签: javascript jquery

我有一个外部JS文件来管理我页面中的所有脚本。 我想在这个文件中写一些代码来检查是否加载了jquery插件并且(如果没有)加载它!

我尝试使用以下代码开始myScripts.js文件:

if (typeof jQuery == 'undefined') {
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);
}

在我的index.html中

我这样做了:

<!DOCTYPE html>
<html lang="pt-br">

    <head>
        <script src="myScripts.js"></script>

    </head>

    <body>

        <button id="test">test</button>

        <script>

        $('#test').click( function() {

            alert('clicked');

        });

        </script>
    </body>

</html>

但它没有执行警告对话框。出了什么问题?

3 个答案:

答案 0 :(得分:1)

click中附上$(document).ready个事件,以确保在DOM准备就绪时触发事件。

$(document).ready(function(){
$('#test').click( function() {

            alert('clicked');

        });
});

答案 1 :(得分:0)

当您使用script.it添加jquery文件时,它将不可用,因此您必须添加onload侦听器以检测它何时可用。

function fnjquery() {
    $('#test').click( function() {

        alert('clicked');

    });
}

if(typeof jQuery=='undefined') {
    var headTag = document.getElementsByTagName("head")[0];
    var jqTag = document.createElement('script');
    jqTag.type = 'text/javascript';
    jqTag.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
    jqTag.onload = fnjquery;
    headTag.appendChild(jqTag);
} else {
     fnjquery();
}

答案 2 :(得分:0)

这是一个有效的Fiddle

function myJQueryCode() {
    //Do stuff with jQuery
    $('#test').click( function() {
            alert('clicked');
        });
}

if(typeof jQuery=='undefined') {
    var headTag = document.getElementsByTagName("head")[0];
    var jqTag = document.createElement('script');
    jqTag.type = 'text/javascript';
    jqTag.src = '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js';
    jqTag.onload = myJQueryCode;
    headTag.appendChild(jqTag);
} else {
     myJQueryCode();
}
<button id="test">
click
</button>