我正在制作一个分页脚本,所有这些都与一个小问题完全不同。我需要在单击页码(li)时触发操作。
分页通过ajax返回到名为"结果"的div。然而,这个div被埋葬了几个其他div深 - 我认为这可能是问题。怎么解决?
由于
$('#result .pagination li').live('click', function () {
var page = $(this).attr('p');
loadData(page);
return false;
});
完整输出低于完整分页
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" style="margin-bottom: 0">
<div class="navbar-header">
<button class="navbar-toggle" type="button"><span class="sr-only">Toggle navigation</span>
</button> <a class="navbar-brand" href="index.php">Title</a>
</div>
</nav>
<nav class="navbar-default navbar-static-side">
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input class="form-control" placeholder="Search..." type="text">
</div>
<!-- /input-group -->
</li>
<li class="active"><a href="index.php">Dashboard</a>
</li>
<li><a href="claims.php">Claims</a>
</li>
</ul>
</div>
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Claims</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
DataTables Advanced Tables
<div id="loading" style="float: right; display: none;">
<img src="images/loading.gif">
</div>
</div>
<div class="panel-body">
<div id="result">
<!-- DATABASE RESULTS GO HERE -->
<ul class="pagination" id="pg">
<li class="disabled"><a href="#">First</a>
</li>
<li class="disabled"><a href="#">«</a>
</li>
<li class="disabled"><a>1</a>
</li>
<li><a href="#">2</a>
</li>
<li><a href="#">3</a>
</li>
<li><a href="#">4</a>
</li>
<li><a href="#">5</a>
</li>
<li><a href="#">6</a>
</li>
<li><a href="#">7</a>
</li>
<li><a href="#">»</a>
</li>
<li><a href="#">Last</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我正在使用jQuery v1.10.2
答案 0 :(得分:1)
您使用的是jQuery&gt; = 1.9,因此有no .live() method
$(document).on('click', '#result .pagination li', function () {
var page = $(this).attr('p');
loadData(page);
return false;
});