Question

我使用AJAX和JAVASCRIPT（JQUERY）处理单页应用程序，因此我执行以下步骤：

首先，我在（see my previous post）标记中获得了链接。
之后我得到要包含在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：

  <select id="typeUser">
        <option value="empty">choose type of user</option>
  </select>
  <button id="btn">say hello world</button>

这是hello.html页面的脚本（hello.js）：

  var typeUser = ["user" , "administrator"];
  $(document).on('click','#btn',function(e)
  {
       alert("hello world");
  });
  typeUser.forEach(e =>{
        $('select#userType').append('<option>'+e+'</option>');
  });

问题是当foreach循环启动时div＃content为空，而select＃userType还不存在，我想要的是将数组typeUser加载到select＃typeUser标记而不包含脚本hello。 js进入hello.html页面。

提前谢谢。

Answer 1

在将代码加载到DOM后，您是否尝试将其置于成功回调中？

success : function(response) {
   console.log("the page was loaded",response);
   $('#content').html(response);
   let options = '';
   $.each(["user" , "administrator"], function(index, type) {
     options += `<option>${type}</option>`;
   });
   $('select#userType').html(options);
}

虽然SPA并不是要将所有代码放在一个地方，这样你就不必处理这类问题了吗？

jquery / ajax - 使用追加函数

1 个答案: