Question

$(function() {
	$("#pagination a").trigger('click'); // When page is loaded we trigger a click

		
	$('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');
	});

	
});


$('#pagination').on('click', 'a', function(e) { // When click on a 'a' element of the pagination div
	var page = this.id; // Page number is the id of the 'a' element
	var pagination = ''; // Init pagination

	$('#articleArea').html('<img src="loader-small.gif" alt="" />'); // Display a processing icon
	var data = {page: page, per_page: 4}; // Create JSON which will be sent via Ajax
	// We set up the per_page var at 4. You may change to any number you need.

	
			var displayData='';
            var articleList = [{profile_id : "1", first_name : "Jack", surname: "Crow"}];
  

			for (var j = 0; j < articleList.length; j++) {
				var gotData = articleList[j];

				displayData += '<div class="well well-sm"><p>' + gotData.profile_id + '. <b>' + gotData.first_name + '</b>' + gotData.surname + '</p>';
	//                displayData += '<p class="hidden">'+gotData.address+'</p>'+'<p class="hidden">'+gotData.gender+'</p>'+'<p class="hidden">'+gotData.dob+'</p>';
				displayData += '</div>';
				
				$('#articleArea').html(displayData);//replacing img with data
			}
			
			// Pagination system
			if (page == 1) pagination += '<div class="cell_disabled"><span>First</span></div><div class="cell_disabled"><span>Previous</span></div>';
			else pagination += '<div class="cell"><a href="#" id="1">First</a></div><div class="cell"><a href="#" id="' + (page - 1) + '">Previous</span></a></div>';

			for (var i=parseInt(page)-3; i<=parseInt(page)+3; i++) {
				if (i >= 1 && i <= data.numPage) {
					pagination += '<div';
					if (i == page) pagination += ' class="cell_active"><span>' + i + '</span>';
					else pagination += ' class="cell"><a href="#" id="' + i + '">' + i + '</a>';
					pagination += '</div>';
				}
			}

			if (page == data.numPage){
				pagination += '<div class="cell_disabled"><span>Next</span></div><div class="cell_disabled"><span>Last</span></div>';
			}
			else {
				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>';
			}
			
			$('#pagination').html(pagination); // We update the pagination DIV	

	return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!DOCTYPE>
<html>
<head>
	<title>Pagination tutorial</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" href="https://bootswatch.com/yeti/bootstrap.min.css" type="text/css">
	
	<style>
	#pagination div { display: inline-block; margin-right: 5px; margin-top: 5px }
	#pagination .cell a { border-radius: 3px; font-size: 11px; color: #333; padding: 8px; text-decoration:none; border: 1px solid #d3d3d3; background-color: #f8f8f8; }
	#pagination .cell a:hover { border: 1px solid #c6c6c6; background-color: #f0f0f0;  }
	#pagination .cell_active span { border-radius: 3px; font-size: 11px; color: #333; padding: 8px; border: 1px solid #c6c6c6; background-color: #e9e9e9; }
	#pagination .cell_disabled span { border-radius: 3px; font-size: 11px; color: #777777; padding: 8px; border: 1px solid #dddddd; background-color: #ffffff; }
	</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">
	<!-- Just tell the system we start with page 1 (id=1) -->
	<!-- See the .js file, we trigger a click when page is loaded -->
	<div><a href="#" id="1"></a></div>
</div>
  
</body>
</html>

我编写了这个JS代码来显示来自服务器的数据并以<div>的形式显示它。点击时每个div应该显示一个模态。但是，这里没有遇到任何点击。我已经写了点击div，它应该显示模态。请帮忙。

Answer 1

代码看起来还不错。但唯一的问题是，你需要以这种方式调用模态窗口：

<强>更新

您在'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

为什么点击这个div时弹出的模态不会出现？

1 个答案: