Question

我正在使用带有this tutorial的AJAX和JAVASCRIPT（JQUERY）设置单页应用程序：

首先，我使用以下代码获取<a>标记中的链接：

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

之后我通过以下代码获取了要包含在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");
    } 
});
 }

最后我在hello.js中有了这个测试脚本：
```
 $('#btn').on('click',function()
  {
       alert("hello world");
  });
```
这是所有相关的页面：

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：

      <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＆＃ 39;工作？提前谢谢你......

Answer 1

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

Event Delegation

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

将hello.js代码更改为此。

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

Answer 2

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

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

2 个答案: