JavaScript确认表单引入外部页面内容失败，变量未更新求排查

这是因为$.get是异步AJAX请求——JavaScript不会等待这个请求拿到confirmaddress.html的内容，就直接往下执行创建对话框的代码了。当你执行.append(text)时，text=data这行代码还没被触发，所以text始终是初始的"Test"值。

方案1：把对话框逻辑放到AJAX回调里 #

直接在请求成功的回调函数里创建对话框，确保拿到内容后再渲染：

function ConfirmDialog(message) {
  $.get("confirmaddress.html", function(data) {
    $('<div></div>').appendTo('body')
      .html('<div><h6>' + message + '?</h6></div>')
      .append(data)
      .dialog({
        modal: true,
        title: 'Address',
        zIndex: 10000,
        autoOpen: true,
        width: 'auto',
        resizable: false,
        buttons: {
          Yes: function() {
            $('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');
            $(this).dialog("close");
          },
          No: function() {
            $('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');
            $(this).dialog("close");
          }
        },
        close: function(event, ui) {
          $(this).remove();
        }
      });
  });
};

方案2：用async/await简化异步逻辑（ES6+） #

如果你的环境支持ES6语法，可以用async/await让异步代码更直观：

async function ConfirmDialog(message) {
  const data = await $.get("confirmaddress.html");
  
  $('<div></div>').appendTo('body')
    .html('<div><h6>' + message + '?</h6></div>')
    .append(data)
    .dialog({
      modal: true,
      title: 'Address',
      zIndex: 10000,
      autoOpen: true,
      width: 'auto',
      resizable: false,
      buttons: {
        Yes: function() {
          $('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');
          $(this).dialog("close");
        },
        No: function() {
          $('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');
          $(this).dialog("close");
        }
      },
      close: function(event, ui) {
        $(this).remove();
      }
    });
};

备选方案：用jQuery的.load()方法 #

你注释掉的.load()其实是更简洁的方式，它会自动加载目标页面内容到元素中：

function ConfirmDialog(message) {
  $('<div></div>').appendTo('body')
    .html('<div><h6>' + message + '?</h6></div>')
    .load('confirmaddress.html')
    .dialog({
      modal: true,
      title: 'Address',
      zIndex: 10000,
      autoOpen: true,
      width: 'auto',
      resizable: false,
      buttons: {
        Yes: function() {
          $('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');
          $(this).dialog("close");
        },
        No: function() {
          $('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');
          $(this).dialog("close");
        }
      },
      close: function(event, ui) {
        $(this).remove();
      }
    });
};

内容的提问来源于stack exchange，提问作者Anton K