Bootstrap的JavaScript需要jQuery而jQuery已经加载了

时间:2016-12-26 09:35:32

标签: javascript jquery html twitter-bootstrap

我在加载Bootstrap库时遇到错误,因为它始终会出现此错误:

  

未捕获错误:Bootstrap的JavaScript需要jQuery

尽管在确保Bootstrap已加载但仍然收到错误后我附加了jQuery库。

我正在使用以下代码通过创建元素将jQuery附加到页面并将其附加到document

/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '3.1.1') {
    console.log("jQuery LOADED");
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type", "text/javascript");
    script_tag.setAttribute("src",
        "http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js");


    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);


    if (script_tag.readyState) {
        script_tag.onreadystatechange = function () { // For old versions of IE
            if (this.readyState == 'complete' || this.readyState == 'loaded') {
                console.log(window.jQuery.fn.jquery);
                scriptLoadHandler();
            }
        };
    } else {
        console.log("ONLOAD STATE");
        script_tag.onload = scriptLoadHandler;
    }
} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    // Call our main function
    main();
}

此处我在Bootstrap准备就绪后创建document

function main() {

    jQuery(document).ready(function ($) {
    var bootstrap_script = document.createElement('script');
    bootstrap_script.setAttribute("type", "text/javascript");
    bootstrap_script.setAttribute("src",
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js");

    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(bootstrap_script);
    })
}

只是为了澄清一件至关重要的事情 我正在将js代码写在单独的js文件中,因为我想稍后将其用作jQuery plugin。因此,我正在尝试附加库,因为我不保证目标页面会包含那些库

4 个答案:

答案 0 :(得分:4)

你错过了")}"在你的"主要"功能。在纠正之后,bootstrap成功加载给我而没有给出任何错误。我使用的是firefox 50.1.0

这是适用于我的代码:



>~




答案 1 :(得分:1)

问题是您使用的是更高版本。使用此版本:

 TransactionSearchBasic transSearch = new TransactionSearchBasic();    
            SearchResult resVendorBill = service.search(transSearch);
            resVendorBill.pageSize = 25;
            resVendorBill.pageSizeSpecified = true;
            resVendorBill.totalRecords = SearchRecentTransCount;
            resVendorBill.totalRecordsSpecified = true;



            transSearch.recordType = new SearchStringField() { @operator = SearchStringFieldOperator.@is, searchValue = "vendorpayment", operatorSpecified = true };
            SearchResult resVendorPayment = service.search(transSearch);

            if (resVendorPayment.status.isSuccess)
            {
                Record[] searchPaymentRecords = resVendorPayment.recordList;
                if (searchPaymentRecords != null && searchPaymentRecords.Length >= 1)
                {
                    List<VendorPayment> lstVendorPayments = searchPaymentRecords.Select(ep => (VendorPayment)ep).OrderByDescending(epo => epo.createdDate).Take(SearchRecentTransCount).ToList();

                }
            }

答案 2 :(得分:1)

尝试使用https加载jquery

script_tag.setAttribute("src",
        "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js");

希望它能运作。

答案 3 :(得分:0)

为什么要这么复杂?

只需在<head>

中添加此内容即可
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script>

或者在文档的最后添加它以加快加载速度。然后,您需要在脚本上使用文档就绪,这样它们就不会在加载jQuery之前运行。