javascript - Run custom code after jQuery has been loaded via Modernizr

Question

Welcome To Ask or Share your Answers For Others

javascript - Run custom code after jQuery has been loaded via Modernizr

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Run custom code after jQuery has been loaded via Modernizr

I'm in the process of developing a new site and have decided to use Modernizr for the first time. I'm fairly sure of the general gist of how it works however, I was looking for some advice regarding the best practise when it comes to loading jQuery and then running jQuery code.

I currently have the following that is loaded as the last item on my page:

Modernizr.load([
    {
        load: '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js',
        complete: function(){
            if( !window.jQuery){
                Modernizr.load('/scripts/jquery-1.11.1.min.js');
            }
        }
    },
    {
        load: '//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js',
        complete: function () {
            if ((typeof $().emulateTransitionEnd == 'function') == false) {
                Modernizr.load('/scripts/bootstrap.min.js');
            }
        }
    }
]);

This attempts to retrieve jQuery from a CDN and if it is unable to do so, loads a local version. It then repeats the process with the Javascript required for my bootstrap components on my site.

The problem I have is that I then have some jQuery code directly following this:

$(document).ready(function () {
    $('.wishlist-toggle').click(function () {
        var nodeId = $(this).data("node");
        var id = $(this).data("id");
        var type = $(this).data("type");
        var addTo = $(this).data("add");
        var list = $(this).data("list");
        var removeFrom = $(this).data("remove");
        var storedCookie = getCookie("wishlist");
        var jsonString = null;
        var found = false;

...

For some reason despite being after the whole jQuery loading declaration I am getting an error in my console specifying that $ is undefined. This would usually suggest that at the point at which by custom script is called, jQuery is not loaded.

My question is, how would this usually be done and what is considered the best practise in this case to ensure that jQuery truly is loaded before attempting to run the custom code.

Any help, tips or pointers would be greatly appreciated.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T00:56:04+0000

Try

var _jquery = function () {
    $(document).ready(function () {
        // do jquery stuff
        console.log("jQuery loaded");
        $("#jq").html("jquery version " + jQuery().jquery + " ready")
    })
};

var _bootstrap = function () {
    // do bootstrap stuff
    console.log("bootstrap loaded");
    $(".btn").trigger("click")
    .promise().done(function(el) {
      setTimeout(
      function() {
        $(el).trigger("click")
      }, 3000
      )
    });
};

var _load = function (url1, url2, test, callback) {
    var script = document.createElement("script");
    script.src = url1;
    script.type = "text/javascript";
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(script);
    setTimeout(function () {
        if (test()) {
            _load(url2, null, function() {return false}, callback)
        } else {
            callback()
        }
    }, 3000)
};

var _scripts = [
    ["//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
    , "//code.jquery.com/jquery-1.11.1.min.js", function () {
        return !window.jQuery
    },
    _jquery],
    ["//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js",
        "//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js", function () {
        return (typeof $().emulateTransitionEnd == 'function') == false
    },
    _bootstrap]
];

_scripts.forEach(function (v) {
    _load(v[0], v[1], v[2], v[3]);
});

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
          <div id="jq"></div>
    </div>
  </div>
</div>
  </body>

Categories

javascript - Run custom code after jQuery has been loaded via Modernizr

javascript - Run custom code after jQuery has been loaded via Modernizr

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags