ajax / jquery – 将脚本包含到动态网页（SPA）中

我在本教程中使用AJAX和JAVASCRIPT（JQUERY）设置单页应用程序：

1. 首先，我使用此代码获取标签中的链接：

     $('a').on('click',function(event) { event.preventDefault(); var pageRef = $(this).attr('href'); callPage(pageRef); }); 

2. 之后，我通过以下代码获取了必须包含在index.html页面中的页面：

    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"); } }); } 

3. 最后我在hello.js中有这个测试脚本：

     $('#btn').on('click',function() { alert("hello world"); }); 

   这是所有相关的页面：

index.html：

           
 
TEST SINGLE PAGE APPLICATION WITH AJAX AND JQUERY
 
 
about
 
contact
 
hello
 
 
 
      

hello.html：

  say hello world 

现在一切正常，但是当我点击#btn警报消息时没有出现，但当我在hello.html页面中包含hello.js文件时，有人可以告诉我第一个案例没有的原因工作？ 因为当jquery包含页面（hello.html）并在index.html中包含脚本（hello.js）时，hello.html和hello.js会在同一个地方，所以为什么按钮#btn don’工作？ 先感谢您 …

Answer 1

您需要为您的ajax内容使用事件委派。

事件代表团

事件委托是指使用事件传播（冒泡）来处理DOM中更高级别的事件而不是事件源自的元素的过程。 它允许我们为现在或将来存在的元素附加单个事件侦听器。

将hello.js代码更改为此。

 $(document).on("click", '#btn', function(event) { alert("hello world"); }); 

Answer 2

您将click事件附加到DOM尚不存在的按钮，因为您的hello.html尚未呈现。 这就是为什么它不会工作。