外部 js 脚本在加载了 jQuery 的页面上不起作用
[英]External js script won't work on pages loaded with jQuery
问题描述
I'm trying to use jQuery to load html posts into my main html page and have external scripts work on them.
我正在尝试使用 jQuery 将 html 帖子加载到我的主 html 页面中，并在其上运行外部脚本。
I have this script (load.js) to load posts into my index.html page:我有这个脚本（load.js）将帖子加载到我的 index.html 页面中：
$(document).ready(function () {
$('#header').load("./Includes/include_header.html");
$('#footer').load("./Includes/include_footer.html");
$('#navbar').load("./Includes/include_navbar.html");
// Posts
$('#post3').load("./Posts/2021-11-16-Starting-Book-of-Shaders.html");
$('#post2').load("./Posts/2021-11-12-Lecture-1.html");
$('#post1').load("./Posts/2021-11-12-Start.html");
});
This works and I can get the posts on the page.这有效，我可以在页面上获取帖子。 But scripts that should be changing the "post load" html page won't work.但是应该更改“加载后”html 页面的脚本将不起作用。
In my index.html's <head> I have this.在我的 index.html 的<head>我有这个。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="/Includes/load.js"></script>
<script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/dist/GlslCanvas.js" defer></script>
but GlslCanvas.js won't recognize the <canvas> element inside my post (in this example "2021-11-16-Starting-Book-of-Shaders.html"):但 GlslCanvas.js 无法识别我帖子中的<canvas>元素（在本例中为“2021-11-16-Starting-Book-of-Shaders.html”）：
<div class="card">
<h2>Getting started with The Book of Shaders</h2>
<p>Testing the very first, most basic example:</p>
<canvas class="glslCanvas" data-fragment-url="/Shaders/test.frag" width="400" height="400"></canvas>
</div>
I have tried to include the line:我试图包括以下行：
<script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/dist/GlslCanvas.js" defer></script>
inside the posts as well, before and after the <div> but it makes no difference.在帖子内部，在<div>之前和之后，但没有区别。
What should I do so that the script recognizes the <canvas> element?我应该怎么做才能让脚本识别<canvas>元素？
Edit: I can confirm it works by placing <canvas class="glslCanvas" data-fragment-url="/Shaders/test.frag" width="400" height="400"></canvas> directly inside the <body> of my index page.编辑：我可以通过将<canvas class="glslCanvas" data-fragment-url="/Shaders/test.frag" width="400" height="400"></canvas>直接放在<body>我的索引页。 No problems there.那里没有问题。
1 个解决方案
解决方案1
0 2021-11-17 13:46:40
let deferreds = []; function load(selector, path) { const def = new $.Deferred() deferreds.push(def); $(selector).load(path, () => def.resolve()); } $(document).ready(function () { load('#header', "./Includes/include_header.html"); load('#footer', "./Includes/include_footer.html"); load('#navbar', "./Includes/include_navbar.html"); // Posts load('#post3', "./Posts/2021-11-16-Starting-Book-of-Shaders.html"); load('#post2', "./Posts/2021-11-12-Lecture-1.html"), load('#post1', "./Posts/2021-11-12-Start.html") $.when.apply(null, deferreds).done(function() { var list = document.getElementsByClassName('glslCanvas'); if (list.length > 0) { window.glslCanvases = []; for (var i = 0; i < list.length; i++) { var sandbox = new GlslCanvas(list[i]); if (sandbox.isValid) { window.glslCanvases.push(sandbox); } } } }); });
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.