爲什麼模式不會彈出點擊這個div？

$(function() { 
 
\t $("#pagination a").trigger('click'); // When page is loaded we trigger a click 
 

 
\t \t 
 
\t $('body').on('click','div.well well-sm',function(){ 
 
\t \t var list = $(this); 
 
\t \t $('#myModal .modal-title').html('User Information'); 
 
\t \t $('#myModal .modal-body').html(list.html()); 
 
\t \t //$('#myModal .modal-body p').removeClass('hidden'); 
 
\t \t // Change this bit! 
 
\t \t $('#myModal').modal('show'); 
 
\t }); 
 

 
\t 
 
}); 
 

 

 
$('#pagination').on('click', 'a', function(e) { // When click on a 'a' element of the pagination div 
 
\t var page = this.id; // Page number is the id of the 'a' element 
 
\t var pagination = ''; // Init pagination 
 

 
\t $('#articleArea').html('<img src="loader-small.gif" alt="" />'); // Display a processing icon 
 
\t var data = {page: page, per_page: 4}; // Create JSON which will be sent via Ajax 
 
\t // We set up the per_page var at 4. You may change to any number you need. 
 

 
\t 
 
\t \t \t var displayData=''; 
 
      var articleList = [{profile_id : "1", first_name : "Jack", surname: "Crow"}]; 
 
    
 

 
\t \t \t for (var j = 0; j < articleList.length; j++) { 
 
\t \t \t \t var gotData = articleList[j]; 
 

 
\t \t \t \t displayData += '<div class="well well-sm"><p>' + gotData.profile_id + '. <b>' + gotData.first_name + '</b>' + gotData.surname + '</p>'; 
 
\t //    displayData += '<p class="hidden">'+gotData.address+'</p>'+'<p class="hidden">'+gotData.gender+'</p>'+'<p class="hidden">'+gotData.dob+'</p>'; 
 
\t \t \t \t displayData += '</div>'; 
 
\t \t \t \t 
 
\t \t \t \t $('#articleArea').html(displayData);//replacing img with data 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t // Pagination system 
 
\t \t \t if (page == 1) pagination += '<div class="cell_disabled"><span>First</span></div><div class="cell_disabled"><span>Previous</span></div>'; 
 
\t \t \t else pagination += '<div class="cell"><a href="#" id="1">First</a></div><div class="cell"><a href="#" id="' + (page - 1) + '">Previous</span></a></div>'; 
 

 
\t \t \t for (var i=parseInt(page)-3; i<=parseInt(page)+3; i++) { 
 
\t \t \t \t if (i >= 1 && i <= data.numPage) { 
 
\t \t \t \t \t pagination += '<div'; 
 
\t \t \t \t \t if (i == page) pagination += ' class="cell_active"><span>' + i + '</span>'; 
 
\t \t \t \t \t else pagination += ' class="cell"><a href="#" id="' + i + '">' + i + '</a>'; 
 
\t \t \t \t \t pagination += '</div>'; 
 
\t \t \t \t } 
 
\t \t \t } 
 

 
\t \t \t if (page == data.numPage){ 
 
\t \t \t \t pagination += '<div class="cell_disabled"><span>Next</span></div><div class="cell_disabled"><span>Last</span></div>'; 
 
\t \t \t } 
 
\t \t \t else { 
 
\t \t \t \t pagination += '<div class="cell"><a href="#" id="' + (parseInt(page) + 1) + '">Next</a></div><div class="cell"><a href="#" id="' + data.numPage + '">Last</span></a></div>'; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t $('#pagination').html(pagination); // We update the pagination DIV \t 
 

 
\t return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<!DOCTYPE> 
 
<html> 
 
<head> 
 
\t <title>Pagination tutorial</title> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
\t <meta charset="utf-8"> 
 
\t <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
\t <link rel="stylesheet" href="https://bootswatch.com/yeti/bootstrap.min.css" type="text/css"> 
 
\t 
 
\t <style> 
 
\t #pagination div { display: inline-block; margin-right: 5px; margin-top: 5px } 
 
\t #pagination .cell a { border-radius: 3px; font-size: 11px; color: #333; padding: 8px; text-decoration:none; border: 1px solid #d3d3d3; background-color: #f8f8f8; } 
 
\t #pagination .cell a:hover { border: 1px solid #c6c6c6; background-color: #f0f0f0; } 
 
\t #pagination .cell_active span { border-radius: 3px; font-size: 11px; color: #333; padding: 8px; border: 1px solid #c6c6c6; background-color: #e9e9e9; } 
 
\t #pagination .cell_disabled span { border-radius: 3px; font-size: 11px; color: #777777; padding: 8px; border: 1px solid #dddddd; background-color: #ffffff; } 
 
\t </style> 
 
</head> 
 
    
 
<body> 
 
<div id="articleArea"></div> <!-- Where articles appear --> 
 

 

 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     ... 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
    
 
    
 
<!-- Where pagination appears --> 
 
<div id="pagination"> 
 
\t <!-- Just tell the system we start with page 1 (id=1) --> 
 
\t <!-- See the .js file, we trigger a click when page is loaded --> 
 
\t <div><a href="#" id="1"></a></div> 
 
</div> 
 
    
 
</body> 
 
</html>

我寫了這個JS代碼，顯示來自服務器的數據，並顯示在<div>形式。點擊每個div應該顯示一個模式。但是，在這裏沒有遇到點擊。我已經寫了點擊應該顯示模態的div。請幫忙。

來源

2015-12-31 Nevermore

該代碼看起來沒問題。但唯一的一點是，你需要調用模態窗口是這樣的：

已經使用'div.well well-sm'缺少.前well-sm

更新：

//----------------------------v Give a dot here. $('body').on('click','div.well.well-sm',function(){ var list = $(this); $('#myModal .modal-title').html('User Information'); $('#myModal .modal-body').html(list.html()); $('#myModal .modal-body p').removeClass('hidden'); // Change this bit! $('#myModal').modal('show'); });

作業輸出：http://output.jsbin.com/kebupakika

來源

2015-12-31 11:47:17

好吧..這似乎並沒有幫助我。模態仍然不出現。 – Nevermore

@Nevermore你有小提琴嗎？ –

我會創建一個。只需一分鐘 – Nevermore

爲什麼模式不會彈出點擊這個div？

回答

相關問題