我想点击一个href，让它打开一个jQuery UI的模态对话框。我可以让模态框打开，但无论我尝试了多少方法，一加载完就会自动关闭。我发现有多种示例指出使用preventDefault() 应该能做到这一点，但似乎没起作用。我在控制台或服务器日志中没有看到任何错误，所以我认为这不是语法问题，而是还有其他情况在起作用。
这个href只是一个普通的链接，例如 my link

我也看到有些人试图用一个需要声明 'type' 的 'button' 来实现，但这不是按钮，只是一个链接。

有什么想法为什么会这样吗？

$(document).on('click', '.open-dialog-btn', function(e) {
  e.preventDefault();
  var url = $(this).attr('href');
  var urlObj = new URL(url);

  // Initialize and open jQuery UI Dialog
  $('#dialogModal').dialog({
    autoOpen: false,
    modal: true,
    width: 500,

    open: function() {
      $(this).load(urlObj.toString());
    }
  });
  $('#dialogModal').dialog("open");

});

<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.2/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.14.2/jquery-ui.js"></script>


<a href='https://example.com/myurl.php' class='open-dialog-btn'>my url</a>

<div id="dialogModal" title="Dialog Title" style="display:none;">
</div>

解决方案

我把它改成了一个按钮，并使用了有人编辑过的更新代码。看起来这让对话框不再自动关闭。 不确定为什么一定要是按钮，但我可以用这个变通办法。