jQuery弹窗无法正常显示求助：疑似元素选择异常

你的代码存在几个关键问题，并非元素选择异常，以下是修复点和最终代码：

核心问题分析 #

• await使用错误：await必须在async函数内调用，但$(document).ready的回调函数没有标记为async，直接使用会触发语法错误。
• 弹窗未主动打开：初始化对话框时设置了autoOpen: false，但没有调用.dialog("open")方法，导致弹窗不会显示。
• 箭头函数的this指向错误：按钮的点击回调用了箭头函数，this不会指向对话框实例，调用$(this).dialog("close")无效。
• 版本不兼容：jQuery UI的CSS版本（1.13.2）与JS版本（1.12.1）不匹配，可能导致样式异常。

修复后的完整代码 #

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<!-- jQuery UI -->
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- jQuery UI CSS（与JS版本统一） -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script>
function Alert(a) {
  // 用jQuery的html方法设置内容，更安全
  $("#p").html(a);
  return new Promise(resolve => {
    $("#main").dialog({
      autoOpen: true, // 直接打开弹窗，无需额外调用open
      height: "auto",
      width: 400,
      modal: true,
      resizable: false,
      buttons: {
        "Ok": function() { // 改用普通函数，this指向对话框实例
          $(this).dialog("close");
          resolve(true);
        }
      }
    });
  });
}
</script>

<script>
$(document).ready(async function() { // 标记回调为async
  await Alert("test");
});
</script>

<div title="Message!" id="main">
  <p id="p"></p>
</div>

额外优化建议 #

• 如果担心元素未加载完成，可以把脚本放在<body>末尾，或者确保在$(document).ready内操作DOM。
• 可以给Alert函数添加元素存在性检查，避免因DOM元素缺失导致报错：

  function Alert(a) {
    const $content = $("#p");
    const $dialog = $("#main");
    if (!$content.length || !$dialog.length) {
      console.error("弹窗相关DOM元素不存在");
      return Promise.reject(new Error("DOM元素缺失"));
    }
    $content.html(a);
    // 后续代码...
  }
  

内容的提问来源于stack exchange，提问作者Jack Johnson