调用插件函数之前的jQuery无法加载使用AJAX的插件文件，因此，给人一种怪异的结果 [英] jQuery cannot load plugin file using ajax before calling the plugin function, thus, gives kind of weird result

问题描述

我试图加载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加入方法：

  

在默认情况下，$ .getScript（）设置缓存设置为false。本   附加一个时间戳的查询参数的URL请求，以确保   该浏览器下载被请求每次脚本。您   可以通过设置缓存属性使用全球覆盖此功能   $ .ajaxSetup（）

  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:

By default, $.getScript() sets the cache setting to false. This appends a timestamped query parameter to the request URL to ensure that the browser downloads the script each time it is requested. You can override this feature by setting the cache property globally using $.ajaxSetup()

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的插件文件，因此，给人一种怪异的结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！