调用插件函数之前的jQuery无法加载使用AJAX的插件文件，因此，给人一种怪异的结果

问题描述

我试图加载jsvascript文件在运行时像这样

 ＆LT;脚本类型=文/ JavaScript的SRC =jQuery的/ jquery.js和＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
VAR SRC_URL ='的http：//本地主机/ mytest，这时/脚本/';
VAR脚本= [
    jQuery的/颜色框/ jquery.colorbox.js'，
    应用程序/ mbro.js
]。

为（变种X = 0 X  - 其中; scripts.length; X ++）{
    SURL = SRC_URL +脚本[X]
    $阿贾克斯（{
        网址：SURL，
        数据类型：剧本，
        异步：假的，
        成功：函数（）{
            的console.log（X +：+ SURL）;
        }
    }）;
}
＆LT; / SCRIPT＆GT;
 

我试图在这里是加载 jquery.colorbox.js 加载之前 mbro.js ， mbro.js 只是试图初始化颜色框上点击一个链接。的含量 mbro.js 如下：

 （功能（$，W，D）{
    VAR ABC = {};
    abc.UTIL = {
        openPopup：函数（）{
            $（。mbro）。颜色框（{
                内联：假的，
            }）;
        }，
    };

    $（D）。就绪（函数（$）{
        abc.UTIL.openPopup（）;
    }）;

}）（jQuery的，窗口，文件）;
 

中的HTML看起来像这样

 ＆LT;一类=mbro的href =媒体/弹出＆GT;浏览＆LT; / A＆GT;
 

不过，我收到此错误

 类型错误：$（...）颜色框不是一个函数
$（。mbro）。颜色框（{
 

我应该是这个错误的原因以及如何解决这个问题。请给我一些建议。谢谢你在前进。

解决方案

您应该使用 $ getScript加入脚本（） jQuery的方法，并保持Ajax请求，比如对异步行为：

 （功能loadScript（X）{
    SURL = SRC_URL +脚本[X]
    $ .getScript（SURL，函数（）{
        如果（脚本[+ X]）loadScript（X）;
    }）;
}（0））;
 

要保持高速缓存的行为，你应该使用 $。阿贾克斯作为mentionned在评论如下方法。在这里，一个解决办法，如果你想仍然使用某种原因 $ getScript加入方法：

  VAR cacheSetting = $ .ajaxSetup（）['缓存'];
$ .ajaxSetup（{
  缓存：真
}）;
（函数loadScript（X）{
    SURL = SRC_URL +脚本[X]
    $ .getScript（SURL，函数（）{
        如果（脚本[+ X]）loadScript（X）;
        其他 {
            $ .ajaxSetup（{
                缓存：cacheSetting
            }）;
        }
    }）;
}（0））;
 

I am trying to load jsvascript files at runtime like this

<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
var SRC_URL = 'http://localhost/mytest/scripts/';
var scripts = [
    'jquery/colorbox/jquery.colorbox.js',
    'app/mbro.js'
];

for (var x = 0; x < scripts.length; x++) {
    sUrl = SRC_URL + scripts[x];
    $.ajax({
        url: sUrl,
        dataType: "script",
        async: false,
        success: function() {
            console.log(x + ': ' + sUrl);
        }
    });
}
</script>

What I am trying here is to load jquery.colorbox.js before loading mbro.js, mbro.js just tries to initialize colorbox on click of a link.The content of the mbro.js is as follows

(function ($, W, D) {
    var abc = {};
    abc.UTIL = {
        openPopup: function () {
            $(".mbro").colorbox({
                inline: false,
            });
        },
    };

    $(D).ready(function ($) {
        abc.UTIL.openPopup();
    });

})(jQuery, window, document);

The HTML looks like this

<a class="mbro" href="media/popup">Browse</a>

But I am getting this error

TypeError: $(...).colorbox is not a function
$(".mbro").colorbox({

What should be cause of this error and how to resolve this situation. Please give me some suggestions. Thank you in advance.

解决方案

You should use $.getScript() jQuery method and keep async behaviour of ajax requests, e.g:

(function loadScript(x) {
    sUrl = SRC_URL + scripts[x];
    $.getScript(sUrl, function(){
        if(scripts[++x]) loadScript(x);
    });
}(0));

To keep cache behaviour, you should use $.ajax method as mentionned in comment below. Here a workaround if for some reason you want to still use $.getScript method:

var cacheSetting = $.ajaxSetup()['cache'];
$.ajaxSetup({
  cache: true
});
(function loadScript(x) {
    sUrl = SRC_URL + scripts[x];
    $.getScript(sUrl, function () {
        if (scripts[++x]) loadScript(x);
        else {
            $.ajaxSetup({
                cache: cacheSetting 
            });     
        }       
    });
}(0));

这篇关于调用插件函数之前的jQuery无法加载使用AJAX的插件文件，因此，给人一种怪异的结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！