ajax / jquery - 将脚本包含到动态网页（SPA）中 [英] ajax/jquery - including script into a dynamic web page (SPA)
问题描述
我使用AJAX和JAVASCRIPT（JQUERY）设置单页应用程序本教程：
I m setting up a single page application using AJAX and JAVASCRIPT(JQUERY) with this tutorial :
-
首先我得到<$ c $中的链接c>< a> 标记此代码：
$('a').on('click',function(event)
{
event.preventDefault();
var pageRef = $(this).attr('href');
callPage(pageRef);
});
之后我通过此代码获取了包含在index.html页面中所需的页面：
after that i get the page required in to include in index.html page by this code :
function callPage(url)
{
$.ajax({
url : url,
type: "GET",
dataType : "text",
success : function(response)
{
console.log("the page was loaded",response);
$('#content').html(response);
},
error : function(error)
{
console.log("the page wasn't loaded",error);
},
complete : function(xhr , status)
{
console.log("the requeste is complete");
}
});
}
最后我在hello.js中有这个测试脚本：
and finally i have this test script in hello.js :
$('#btn').on('click',function()
{
alert("hello world");
});
这是所有相关页面：
index.html：
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="main">
<h1>TEST SINGLE PAGE APPLICATION WITH AJAX AND JQUERY</h1>
<ul>
<li><a href="./about.html">about</a></li>
<li><a href="./contact.html">contact</a></li>
<li><a href="./hello.html">hello</a></li>
</ul>
<div id="content"></div>
</div>
<script src="./js/jquery.min.js"></script>
<script src="./js/script.js"></script>
<script src="./js/hello.js"></script>
</body>
</html>
hello.html：
hello.html :
<button id="btn">say hello world</button>
现在一切正常，但是当我点击#btn时，警报信息没有出现，但是当我在hello.html页面中包含hello.js文件时，有人可以告诉我第一个案例不起作用的原因吗？因为当jquery包含页面（hello.html）并在index.html中包含脚本（hello.js）时，hello.html和hello.js会在同一个地方，所以为什么按钮#btn don'工作？
提前谢谢...
now all is working fine, but when I click on #btn the alert message don't appear, but when I include hello.js file in hello.html page its work, can someone tell me the reason why the first case doesn't work? because when jquery include the page (hello.html) and include the script (hello.js) in the index.html, the hello.html, and hello.js gonna be in the same place, so why the button #btn don't work? thank you in advance ...
推荐答案
您需要使用事件委托来获取ajax内容。
You need to use Event delegation for your ajax content.
事件委托是指使用事件传播
（冒泡）来处理DOM中比$ b更高级别的事件的过程发生事件的$ b元素。它允许我们为现在或将来存在的元素附加一个
事件监听器。
Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. It allows us to attach a single event listener for elements that exist now or in the future.
更改hello.js这个代码。
change hello.js code to this.
$(document).on("click", '#btn', function(event) {
alert("hello world");
});
这篇关于ajax / jquery - 将脚本包含到动态网页（SPA）中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
