How to make a jquery javascript library affect just a specific div in HTML?
Question
I would like to know How to make a jquery javascript library affect just a specific div in HTML?. We suppose that we have the code below:
<html>
<head>
</head>
<body>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery1.js" type="text/javascript"></script>
<div id="div1"></div>
<div id="div2"></div>
</body>
We also suppose that the file jquery.js contains the jquery javascript library having the version 1.4: version 1.4 and that the file jquery1.js contains the jquery javascript library having the version 1.11.1: version 1.11.1 . what I would like really to know is how can I make the jquery.js script affect just the div which has the id "div1" and how can I make the jquery1.js script affect just the other one (I mean the div having the id "div2"). Is it possible to do that?
Thanks in advance.
2 answers
solution1
0 2014-06-26 16:34:17
@Nick R is right with his comment; you should not load different versions of JQuery on the same page. Different versions of the JQuery libraries often include different editions of the same functions and create conflicts with each other. This is because when an external file ( JQuery library) is loaded into an HTML page, all of the HTML page has access to the file. So, when you load in two different libraries into the same page -- no matter where you are in the page -- everywhere will be aware of both libraries.
As a get around, you can create new pages that each load different libraries. Everything that you wanted to put inside the div s on the original page would be on the new pages. Then you would embed them into your original page as inline frames.
solution2
0 2014-06-26 16:48:08
There are in fact "safe" ways of loading different versions of JQuery into the same page. For example, if you are using the AngularJS framework, you can define $scope for both versions of JQuery.
Than you can scope various divs to a single version of JQuery in order to prevent any issues from occurring. In Angular, scoping is as simple as writing a controller which accesses JQuery. Than create $scope.jqv1 = .., and in the html
<div ng-controller="JQueryControllerOne">
etc.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.