How do I use the jQuery Multi module?

Question

I have a site theme that needs to use Jquery 2.1.3. The theme uses on() and affects the node/add form. So I also need Drupal's default Jquery 1.4 to be running, otherwise the default Drupal scripts on the node/add form will not work.

The Jquery Multi module is supposed to be the best way of doing this. But how do you use the module? I have installed it and verified that the Jquery 2.1 library is running.

The Read Me file says:

For instance, if you're loading jQuery 1.7.1, the alias will be jq171, and you can use it in your scripts by wrapping your code as follows:

(function($) {
  // The using jQuery 1.7.1
})(jq171)

NOTE: All jQuery targeted to use jQuery Multi (using methods A, B, or C above) must properly use a closure around the jQuery code, as is best practice for all Drupal jQuery code, i.e.:

(function($) {
  // The code using jQuery 1.7.1
})(jQuery)

Do I wrap my code in both jq213 and Jquery?

(function($) {
    (function($) {
        "use strict";
        $(document).ready(function() {
          
            /* *********************** */
            /* Mobile only Hamburger menu       */
            /* *********************** */
            $(".masthead .menu").on("click", function() {
                $(this).toggleClass('menu-close');
                $("body").toggleClass('menu-open');
                $(".masthead ul").toggleClass("animated bounceInDown");
                $(".masthead .tap-back").toggle();
           });
                  });
    })(jq213)
})(jQuery);

I have tried this, but it doesn't work. When I check the HTML source I can see that Jquery 2.1.3 doesn't load, so presumably I am wrapping my scripts wrongly.

In admin/config/system/jqmulti, I can see that Jquery 2.1.3 has been loaded.

Answer 1

Why you did double code wrap? Try to use:

(function($) {
    "use strict";
    $(document).ready(function() {

        /* *********************** */
        /* Mobile only Hamburger menu       */
        /* *********************** */
        $(".masthead .menu").on("click", function() {
            $(this).toggleClass('menu-close');
            $("body").toggleClass('menu-open');
            $(".masthead ul").toggleClass("animated bounceInDown");
            $(".masthead .tap-back").toggle();
       });
              });
})(jq213);