Correct use of JQuery in compatibility mode-CodePudding

I a javascript class i wrote i use a specific dynamically loaded version of JQuery (version 3.2.1). I use that dynamiclly loaded version in compatibilty mode.

I am not suere if selector "generated" in compatibilty mode and passed as argument to a function, will also use the compatibility mode (my own version instead of the original one).

Here the code :

function toggleFunction ( jQuerySelectorItem )
{
    //hide all
    $jq_321(".class").hide();
    
    var checkBoxes = $jq_321(".class[rel-data='"   jQuerySelectorItem.attr("rel-data")   "'] input"); // <<<<< is this 'jQuerySelectorItem' still use jQuery 3.2.1 if generated by '$jq_321' selector ?

    if (jQuerySelectorItem.is(":checked")) 
    {
        checkBoxes.toArray().forEach ( item => this.__changeDependantCheckBoxStatus(item, true));
    } 
    else 
    {
        checkBoxes.toArray().forEach ( item => this.__changeDependantCheckBoxStatus(item, false));
    }
    
    $jq_321(".class[rel-data='"   jQuerySelectorItem.attr("rel-data")   "']").show();
}

Here is how i dynamically load the correct version of JQuery in compatibilty mode before using it :

window.onload = (event) => {
    var jqScriptTag = document.createElement("script");
    jqScriptTag.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js';

    jqScriptTag.onload = function() {
        console.log('Temporary jQuery version : '   jQuery.fn.jquery);
        $jq_321 = jQuery.noConflict(true);

        console.log('Restored original jQuery version : '   jQuery.fn.jquery);
        //other code that will indeed call toggleFunction when needed
    };

    document.head.appendChild(jqScriptTag);
};

Here the console log :

Temporary jQuery version : 3.2.1

Restored original jQuery version : 1.4.2

CodePudding user response：

The .fn. is a way to access jquery methods without a jquery object, what you're calling selector "generated".

You can also call the part after .fn. on any jquery object, eg:

console.log($("div").jquery)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>

So you can check easily enough which version your jquery object (generated selector) is:

console.log(d331.jquery)
console.log(d123.jquery)

<div id="div1"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var d331 = $("#div1");
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script>
var d123 = $("#div1");
</script>

As long as your functions uses jquery methods that exist in both, you won't get an issue (in your function).