[英]jQuery pagination plugin event target
I'm using the jQuery pagination plugin seen here: 我正在使用此处看到的jQuery分页插件:
http://esimakin.github.io/twbs-pagination/ http://esimakin.github.io/twbs-pagination/
As you can see in the documentation, there is a section for "Synchronized pagination elements". 如您在文档中所见,其中有一个“同步分页元素”部分。 I'm using this functionality to place a pagination control at the bottom and top of my content. 我正在使用此功能将分页控件放置在内容的底部和顶部。
However, when the bottom pagination element is clicked, I want to implement some special scrolling behavior that should not occur of the top pagination element is clicked. 但是,当单击底部的分页元素时,我要实现一些特殊的滚动行为,而单击顶部的分页元素不会发生这种情况。
I thought I could just use the event
argument to the onPageClick
callback, however, it seems that no matter if I click the top or bottom pagination, the event always lists the top pagination as its currentTarget
. 我以为我可以只使用onPageClick
回调的event
参数,但是,无论单击顶部还是底部分页,事件总是将顶部分页列为currentTarget
。 Why would this be occurring even when I click the bottom pagination control? 为什么即使单击底部分页控件也会出现这种情况? Here's a fiddle to demonstrate: 这是一个小提琴来演示:
http://jsfiddle.net/flyingL123/qerexw0L/1/ http://jsfiddle.net/flyingL123/qerexw0L/1/
HTML 的HTML
<div class="text-center">
<ul class="sync-pagination pagination-sm pagination" id="top"></ul>
<div id="sync-example-page-content" class="well"></div>
<ul class="sync-pagination pagination-sm pagination" id="bottom"></ul>
</div>
JS JS
$('.sync-pagination').twbsPagination({
totalPages: 20,
onPageClick: function (evt, page) {
$('#sync-example-page-content').text('Page ' + page);
console.log(evt);
}
});
Please find a working fiddle here: http://jsfiddle.net/2vL4addq/ 请在此处找到可用的小提琴: http : //jsfiddle.net/2vL4addq/
You need to workaround this behavior because the class name will get you the first entry (in your case your ID=top, never the bottom). 您需要解决此问题,因为类名将使您获得第一个条目(在您的情况下,您的ID = top,而不是bottom)。 To target the bottom, you need to do some of your own binding. 要定位底部,您需要做一些自己的绑定。
I created a function setupPaginators(), which is used during doc ready and when the page button click changes to keep the top and bottom in sync (not using the plugins default behavior). 我创建了一个setupPaginators()函数,该函数在文档准备就绪时以及单击页面按钮时更改以使顶部和底部保持同步(不使用插件的默认行为)时使用。
setupPaginators(1);
function setupPaginators(pageNumber){
// Default options for page.
var opts = {
totalPages: 20,
onPageClick: function (evt, page) {
$('#sync-example-page-content').text('Page ' + page);
console.log(evt);
if (($(this).attr("id") == "bottom")){
// Put your special bottom code here.
alert("bottom was clicked");
}
setupPaginators(page);
}
};
// Remove existing top.
$('#top').empty();
$('#top').removeData("twbs-pagination");
$('#top').unbind("page");
// Bind new top and override the startPage.
$('#top').twbsPagination($.extend(opts, {
startPage: pageNumber
}));
// Remove existing bottom.
$('#bottom').empty();
$('#bottom').removeData("twbs-pagination");
$('#bottom').unbind("page");
// Bind new bottom and override the startPage.
$('#bottom').twbsPagination($.extend(opts, {
startPage: pageNumber
}));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.