How to get all Javascript working on html sections loaded in with JQuery .load()
Question
I have an index.html page and then 2 other .html files that are loaded into their respective divs within index.html with the JQuery .load() function.
There is content in each of these files that use different scripts from different source files. I have them all included in index.html but then the Javascript in the sections from the two different .html files doesn't work.
If I add all the <script src> to the two other .html files; the page runs extremely slowly and even then, the Javascript of those sections doesn't work properly.
So my question is if there's a way to get all scripts and source files to work everywhere.
And why don't these scripts work for these loaded sections if they are just being inserted into index.html and index.html has all the script src inclusions?
Thanks
1 answers
solution1
0 2017-02-18 09:05:33
I an trying to recreate you problem. This follows
index.html-> loads two html file in respective div with id(1,2)
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="1"></div>
<div id="2"></div>
<script>
$('#1').load("load1.html"); //load html
$('#2').load("load2.html"); //load html
</script>
</body>
</html>
load1.html
<button onclick="function11()">Load11(function 1)</button>
<button onclick="function12()">Load12(function 2)</button>
<script src="script1.js"></script>
<script src="script2.js"></script>
this contains two external scripts with respective function
load2.html
<button onclick="function21()">Load21(function 1)</button>
<button onclick="function22()">Load22(function 2)</button>
<script src="script3.js"></script>
<script src="script4.js"></script>
same here as above
Here in index.html page two external files (load1.html,load2.html) are loaded .These two files contains buttons having click function defined in their external script files. All are loaded in index.html and each are click are executing properly.
Plunker link for preview
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.