外包后JavaScript无法工作

我使用的是多页面模板（所有页面和javascriot都在一个html文件中）。我刚刚重组了我的jQuery移动应用程序：

• 之前：html文件中的所有JavaSripts，例如：

  ---

  如果在页面加载完成后没有执行脚本，则像
  $（“#searchHistory”）
  这样的查询可能会返回空
  
  确保在onload事件中调用的回调中执行脚本
  
  所以我建议这样做（请检查您是否初始化了“历史记录”）
  
  现在，pagecreate事件还将一个行为绑定到您的搜索按钮，以便在每次单击它时实际更新历史记录。
  我认为“外包”并不是您所认为的意思。您在哪里包含了
  function.js
  文件？您必须在
  $（文档）中包装代码。on（“pageinit”，函数
  或任何页面事件。我曾尝试将代码包装在页面事件中，如您的或pagecreate，pageshow…，但如果这样做，我会收到以下错误：getHistory未定义…如果函数getHistory不在$（文档）中。on（“pageinit”，…我得到了这个错误：oldhistoryarray没有定义我认为执行顺序是问题所在。如果函数getHistory不在
  $（文档）中。在（“pagecreate”、“#searchPage”上，函数（）{…
  -它将首先执行，而oldhistoryarray没有定义，因为oldhistoryarray是在
  $（文档）中定义的。on(“pagecreate”，“searchPage”，function（）{…
  。如果函数getHistory位于
  $（文档）中。在（“pagecreate”，“searchPage”，function（）{…
  -它甚至不会运行。我想你的回答和我3分钟前的评论是一样的，对吧？但我到目前为止还没有找到解决方案。你的问题的一部分是
  function.js
  中的
  if
  语句在脚本加载时就被执行了。这意味着
  $（“#lastresults'））
  将寻找一个尚未成为DOM树一部分的id。将您的
  if
  封装到一个函数中，并在onload事件中调用此函数，或者由于您使用的是jquery mobile，请在pagecreate中调用此函数。请检查更新的答案，并让我知道它是否对您的问题有更多说明。我看到了问题，但我无法使用您的解决方案，因为还有很多其他代码和依赖项。我将在接下来的几天内尝试。谢谢。当然。如果您需要更多帮助，请告诉我，如果有帮助，请接受答案
  <div data-role="page" id="searchPage" class="bg-light">
  
      <div data-role="content">
  
          <div id="content-search">
              <p><input type="text" name="address" id="address" class="stored" value="" /></p>
              <p><input type="submit" id="submitAddress" value="Search" data-theme="a" data-corners="false" /></p>
          </div>
  
          <div id="searchHistory">
              <div class="ui-corner-all custom-corners">
                  <div class="ui-bar ui-bar-c">
                      <h3>History:</h3>
                  </div>
                  <div class="ui-body ui-body-c">
                      <div id="lastResults" class="ui-body ui-body-c ui-corner-all"></div>
                  </div>
              </div>  
          </div>  
  
      </div>
  
      <script>
      ......
      // check and show previous results in **lastResults** div
      if (localStorage.getItem("history") != null) {
          var historyTemp = localStorage.getItem("history");
          var oldhistoryarray = historyTemp.split("|");
  
          oldhistoryarray.reverse();
  
          $("#lastResults").empty();
          jQuery.each( oldhistoryarray, function( i, val ) {
              $("#lastResults").append(
                  "<ul data-role=\"listview\" data-inset=\"true\" >" +
                      // store history in localStorage
                      "<li><a href=\"#mapPage\" onClick=\"getHistory("+i+");\" >"+oldhistoryarray[i]+"</a></li>" +
                  "</ul>"
              );
              // max. history
              if (i==3) {
                  return false;
              }
          });
  
  
      } else {
          // hide search history
          console.log("no history");
          $("#searchHistory").hide();
      }
  
      function getHistory(i){
          localStorage.setItem('address', oldhistoryarray[i]); 
      }
  
      </script>
  
  </div>
  
  <div data-role="page" id="searchPage" class="bg-light">
  
      <div data-role="content">
  
      </div>
  
      <script></script>
  
  </div>
  
  // check and show previous results in **lastResults** div
  if (localStorage.getItem("history") != null) {
      var historyTemp = localStorage.getItem("history");
      var oldhistoryarray = historyTemp.split("|");
  
      oldhistoryarray.reverse();
  
      $("#lastResults").empty();
      jQuery.each( oldhistoryarray, function( i, val ) {
          $("#lastResults").append(
              "<ul data-role=\"listview\" data-inset=\"true\" >" +
                  // store history in localStorage
                  "<li><a href=\"#mapPage\" onClick=\"getHistory("+i+");\" >"+oldhistoryarray[i]+"</a></li>" +
              "</ul>"
          );
          // max. history
          if (i==3) {
              return false;
          }
      });
  
  
  } else {
      // hide search history
      console.log("no history");
      $("#searchHistory").hide();
  }
  
  function getHistory(i){
      localStorage.setItem('address', oldhistoryarray[i]); 
  }
  
  <!DOCTYPE html>
  <html>
  <head>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
  
  <script src="function.js"></script>
  
  <script>
  
  $(document).on( "pagecreate", function( event ) {
    console.log("page created")
  
  
      $('#submitAddress').on('click',function(){
          makeHistory();
      })
  
  });
  
  </script>
  </head>
  
  <body>
  <div data-role="page" id="searchPage" class="bg-light">
  
      <div data-role="content">
  
          <div id="content-search">
              <p><input type="text" name="address" id="address" class="stored" value="" /></p>
              <p><input type="submit" id="submitAddress" value="Search" data-theme="a" data-corners="false" /></p>
          </div>
  
          <div id="searchHistory">
              <div class="ui-corner-all custom-corners">
                  <div class="ui-bar ui-bar-c">
                      <h3>History:</h3>
                  </div>
                  <div class="ui-body ui-body-c">
                      <div id="lastResults" class="ui-body ui-body-c ui-corner-all"></div>
                  </div>
              </div>  
          </div>  
  
      </div>
  
  </div>
  </body>
  </html>
  
  // check and show previous results in **lastResults** div
  
  function makeHistory()
  {
  if (localStorage.getItem("history") != null) {
      var historyTemp = localStorage.getItem("history");
      var oldhistoryarray = historyTemp.split("|");
  
      oldhistoryarray.reverse();
  
      $("#lastResults").empty();
      jQuery.each( oldhistoryarray, function( i, val ) {
          $("#lastResults").append(
              "<ul data-role=\"listview\" data-inset=\"true\" >" +
                  // store history in localStorage
                  "<li><a href=\"#mapPage\" onClick=\"getHistory("+i+");\" >"+oldhistoryarray[i]+"</a></li>" +
              "</ul>"
          );
          // max. history
          if (i==3) {
              return false;
          }
      });
  
  
  } else {
      // hide search history
      console.log("no history");
      //and you probably need to initialize your history here, something like
      localStorage.setItem("history", "lalala");
      $("#searchHistory").hide();
  }
  
  }
  
  function getHistory(i){
      localStorage.setItem('address', oldhistoryarray[i]); 
  }