如何在鏈接點擊時更改引導模式中的文本？

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中，你需要使用事件代表團： -

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

，並添加event到openModal()這樣你就可以event.preventDefault();停止a的默認行爲裝載在瀏覽器： -

function openModal(event) { 
    event.preventDefault() 

Answer 2

您需要設置一個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(); 
 
     
 
    } 
 
    }); 
 

 
});