what if jquery.js is include into the page twice?

Question

If I introduce the jquery.js into the page twice(unintentional OR intentional), what will happen?

Is there any mechanism in jquery that can handle this situation?

AFAIK, the later one jquery will overwrite the previous one, and if there is some action binding with the previous one, it will be cleared.

What can I do to avoid the later one overwrite the previous one?

===edited===

I couldn't understand WHY this question got a down vote. Could the people who give the down vote give out the answer?

==edited again== @user568458

u r right, now it's the test code:

<html>
<head>
</head>
<body>
fast<em id="fast"></em><br>
slow<em id="slow"></em><br>
<em id="locker"></em>
</body>
<script type="text/javascript">
function callback(type){
    document.getElementById(type).innerHTML=" loaded!";
    console.log($.foo);
    console.log($);
    console.log($.foo);
    $("#locker").html(type);
    console.log($("#locker").click);
    $("#locker").click(function(){console.log(type);});
    $.foo = "fast";
    console.log($.foo);
}
function ajax(url, type){
    var JSONP = document.createElement('script');
    JSONP.type = "text/javascript";
    JSONP.src = url+"?callback=callback"+type;
    JSONP.async = JSONP.async;
    JSONP.onload=function(){
        callback(type);
    }
    document.getElementsByTagName('head')[0].appendChild(JSONP);
}
</script>
<script>
ajax("http://foo.com/jquery.fast.js", "fast");
ajax("http://foo.com/jquery.slow.js", "slow");
</script>
</html>

it produced the result:

undefined test:12
function (a,b){return new e.fn.init(a,b,h)} test:13
undefined test:14
function (a,c){c==null&&(c=a,a=null);return arguments.length>0?this.bind(b,a,c):this.trigger(b)} test:16 
fast test:19
undefined test:12
function (a,b){return new e.fn.init(a,b,h)} test:13
undefined test:14
function (a,c){c==null&&(c=a,a=null);return arguments.length>0?this.bind(b,a,c):this.trigger(b)} test:16 
fast

the token "$" of the previous one(jquery.fast.js) is overwrite by the later(jquery.slow.js) one.

Is there any method to avoid the overwriting?

If you need 2 versions use noConflict() to set it up - though I think that is a bad idea. http://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page — Jay Blanchard, Dec 17 '12 at 14:16
@Swarnajith no, I just want to know what will happen if the SAME JQUERY.JS is included into the page twice. And, how to avoid the previous be overwrite by the later one. — dennisyuan, Dec 17 '12 at 14:27
well, one thing is for sure it will not overwrite, but there can be a conflict — Swarne27, Dec 17 '12 at 14:33
I didn't downvote, but I'm guessing it was because you're asking something that could be tested fairly easily, without saying what you've tried. I think people would respond better if it was like "I tried some basic stuff - binding click events, looping through elements, adding and removing elements - and those worked (fine/badly/inconsistently). Are there other problems that this might cause / reasons for this?" — user56reinstatemonica8, Dec 17 '12 at 14:43
@user568458 u r right about the good practice of ask a question. I don't think this question is "could be tested fairly easily". I want to know what't the solution is to avoid the "overwrite", basically about the loading/booting mechanism about jquery. I don't think this is a well known knowledge. — dennisyuan, Dec 17 '12 at 16:05

score -1 · Answer 1 · answered Dec 17 '12 at 14:35

I did try this code:

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
            $(function() {
                    $('#try').click(function() {
                            alert('ok');
                    });
            });
    </script>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>

<button id="try">Try me</button>

</body>
</html>

Nothing happend. On click I've got an alert. Same result if the second jquery.js loaded in body tag before or after the button.

actually the javascript load in your example in in block mode, so what if I do concurrent load? — dennisyuan, Dec 17 '12 at 14:38

what if jquery.js is include into the page twice?

1 Answers1