javascript - 如何在链接点击时更改 Bootstrap 模式内的文本？

Question

我的网页上有指向各种文章的链接，这些链接可以在 Bootstrap 模式中打开一篇文章。在 Modal 的正文中有两个链接，一个指向上一篇文章，另一个指向下一篇文章。截至目前，当用户在显示模式内的内容中单击这些链接中的任何一个时，该链接将在浏览器本身中加载。这是我的模态函数的样子:

 function openModal() {
  // Store vallues in variables: var url , urlSplit, mainPage, txt, content
  // prevLink, nextLink, imageURL etc.
  // All of them have correct values.

 $.ajax({
  type: "POST",
  url: 'getarticle.php',
  data: {
    link: url,
    page: mainPage
  },
  success: function(data) {
  var moreLinks =  '<a class="modal-link" href="'+nextLink+'">Next</a>';
  data = data+moreLinks;
  $('.feed-modal .modal-body').html(data);
  $('.progress').fadeOut();
}
});
}

openModal 函数被触发:

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

因此，单击 moreLinks 应该会更改模态框内的文本，但它会在浏览器中加载链接。我怎样才能只加载模式中的内容？

Answer 1

由于链接是动态添加到 DOM 中的，因此您需要使用事件委托(delegate):-

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

并将event 添加到openModal() 以便您可以event.preventDefault(); 停止a 在浏览器中加载的默认行为:-

function openModal(event) {
   event.preventDefault()