本文介绍了调用插件函数之前的jQuery无法加载使用AJAX的插件文件,因此,给人一种怪异的结果的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

 <脚本类型=文/ JavaScript的SRC =jQuery的/ jquery.js和>< / SCRIPT>
<脚本类型=文/ JavaScript的>
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);
        }
    });
}
< / SCRIPT>
 

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

 (功能($,W,D){
    VAR ABC = {};
    abc.UTIL = {
        openPopup:函数(){
            $(。mbro)。颜色框({
                内联:假的,
            });
        },
    };

    $(D)。就绪(函数($){
        abc.UTIL.openPopup();
    });

})(jQuery的,窗口,文件);
 

中的HTML看起来像这样

 <一类=mbro的href =媒体/弹出>浏览< / A>
 

不过,我收到此错误

 类型错误:$(...)颜色框不是一个函数
$(。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的插件文件,因此,给人一种怪异的结果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

11-03 03:48