javascript - jquery $.get 分配给变量的结果在事件监听器中不可用

Question

任何人都可以识别此代码的问题和/或帮助修复它吗？

我正在尝试预加载 html 文件，将它们的 html 分配给变量，然后在用户单击按钮后将它们注入(inject)到 div 中。

我在点击时将 html 文件加载到 div 中的地方成功运行，但我想预加载 html，这样用户就不必等待 html 文件的外部资源加载或不加载存在互联网故障/外部资源获取问题。

在代码中，警报成功显示了 html，所以我知道至少那部分是有效的。

//IIFE
(function() { 

// ^other stuff omitted

// start navButton behavior


var hatContent;
function doSomethingWithData(data) {
  hatContent = data;
  alert(data);
}

$.get('helpAndTips.html', doSomethingWithData);

function replaceNotebookContentWithVariable(content){
    $("#usersNotebook").innerHTML = content;
  }

document.getElementById('helpAndTipsButton').addEventListener("click", function(){
  replaceNotebookContentWithVariable(hatContent);
 }, false);

// end navButton behavior ____________________X

// other stuff omitted

})(); // end IIFE

Answer 1

试试这个，看看它是否更适合你。

(function() {
  //save the ajax deferred
  var helpAndTips = $.get('helpAndTips.html');

  function replaceNotebookContentWithVariable(content) {
    $("#usersNotebook").innerHTML = content;
  }

  $('#helpAndTipsButton').on("click", function() {
    //call the replace with the result of the deferred whenever it gets it
    //if the deferred has already resolved this will happen immediately
    helpAndTips.then(function(hatContent) {
      replaceNotebookContentWithVariable(hatContent);
    });
  }, false);
})();