点击a标签触发JQuery UI模态框加载其href对应内容失败求助

核心问题原因 #

• 脚本执行时机错误：JS代码放在head标签内直接执行，此时页面DOM还未完成渲染，$("a.modal")选择器无法找到对应元素，点击事件绑定失败
• 未预先初始化jQuery UI Dialog组件：dialog("open")方法仅能作用于已经完成dialog()初始化的DOM元素，直接对未初始化的.container调用open方法不会触发模态框弹出
• 可选检查项：确保testb.html文件和当前页面文件处于同一目录下，否则会出现资源加载失败的问题

修正后完整代码 #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery test</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  <script>
    // 等待DOM完全加载后再执行逻辑
    $(function() {
      // 提前初始化容器为dialog组件，默认不自动弹出
      $(".container").dialog({
        autoOpen: false,
        modal: true
      });
      // 绑定模态框跳转点击事件
      $("a.modal").click(function(e) {
        e.preventDefault();
        // 加载目标资源完成后再打开模态框，避免内容闪烁
        $(".container").load(this.href, function() {
          $(this).dialog("open");
        });
      });
    });
  </script>
</head>
<body>
  <div class="container"></div>
  <p><a href="testb.html" class="modal">Click!</a></p>
</body>
</html>

内容的提问来源于stack exchange，提问作者David Badke