如何防止链接在模态窗口中加载整个网页？

Question

我有一个奇怪的问题。我的网页有来自10个或12个不同网站的约50个标题。当用户点击任何一个标题（这是指向实际文章的链接）时，该网页应该仅在模态窗口中显示该文章的主要内容。除了在第一次点击期间，它每次都有效。以下是带有XHR请求的网络选项卡的屏幕截图。

如您所见，我点击的第一个链接会加载额外的XHR请求。此行为并非特定于任何一个网站。首次点击任何标题会产生两个请求。通过第一次点击，我并不是指用户第一次点击单个标题。我的意思是首次点击任何头条新闻。

在上面的屏幕截图中，我首先点击了加载AJAX请求的第三个标题以及实际链接。然后我点击第一个标题，它不会导致任何额外的XHR请求。为了确保它不是网站特有的东西，我再次点击了第三个标题。这次，没有额外的XHR请求。我使用了e.preventDefault()，它只能在第一次点击后阻止加载额外请求。

这是我的代码：

$('a.modal-link').on('click', openModal);

这是我的openModal函数：

function openModal(evt) {
  evt.preventDefault();
  var link = $(this).attr("href");
  var page = window.location.href.split('?')[0];
  var text = $(this).text();
  $.ajax({
    type: "POST",
    url: "path/to/getarticle.php",
    data: {
      link: link,
      page: page
    },
    success: function(markup) {
      $(".feed-modal .modal-body").html(markup);
    }
})