如何在链接点击时更改引导模式内的文本？答案

【问题标题】：How to change text inside a bootstrap modal on link click?如何在链接点击时更改引导模式内的文本？
【发布时间】：2016-01-14 07:51:21
【问题描述】：

我的网页上有各种文章的链接，这些文章可以在 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 应该会更改模态框内的文本，但它会在浏览器中加载链接。如何才能在 Modal 中加载内容？

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

由于链接是动态添加到 DOM 中的，所以需要使用事件委托：-

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

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

function openModal(event) {
   event.preventDefault()

【讨论】：

【解决方案2】：

您需要在 modal 内的链接上设置 onclick 处理程序。

// Event delegation approach as the link are genrated dynamically.
$(document).on("click", ".modal-link", function(e) {

  e.preventDefault(); // Prevent redirection on button click
  $('.progress').fadeIn(); // Fadein the progress
  var url = this.href;
  var mainPage = ""; // Set it to something , i dont know what it is.
  $.ajax({
    type: "POST",
    url: 'getarticle.php',
    data: {
      link: url,
      page: mainPage
    },
    success: function(data) {
      
      // Rest all code to update the content is same.
      var moreLinks = '<a class="modal-link" href="' + nextLink + '">Next</a>';
      data = data + moreLinks;
      $('.feed-modal .modal-body').html(data);
      $('.progress').fadeOut();
      
    }
  });

});

【讨论】：

链接仍然在浏览器中加载。