在我的网页上有各种文章的链接,可以在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中加载内容?
答案 0 :(得分:0)
当链接动态添加到DOM时,您需要使用事件委派: -
$('.feed-modal').on('click', 'a.modal-link', openModal);
并将event
添加到openModal()
,这样您就可以event.preventDefault();
停止a
在浏览器中加载时的默认行为: -
function openModal(event) {
event.preventDefault()
答案 1 :(得分:0)
您需要在模态内的链接上设置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();
}
});
});
&#13;