Javascript jQuery分页插件事件目标

我正在使用这里看到的jQuery分页插件：

正如您在文档中看到的，有一节介绍“同步分页元素”。我正在使用此功能在内容的底部和顶部放置分页控件

但是，当单击底部分页元素时，我想实现一些在单击顶部分页元素时不应该发生的特殊滚动行为

我想我可以使用

事件

参数来调用

onPageClick

回调，但是，似乎无论我单击顶部或底部分页，事件总是将顶部分页列为其

当前目标

。为什么即使单击底部分页控件也会发生这种情况？这里有一把小提琴来演示：

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>

---

请在此处找到可用的小提琴：

您需要绕过此行为，因为类名将为您获取第一个条目（在您的情况下，您的ID=top，而不是bottom）。要定位底部，您需要自己进行一些绑定

我创建了一个函数setupPaginators（），它在doc ready期间和页面按钮单击更改时使用，以保持顶部和底部同步（不使用插件默认行为）

---

请在此处找到可用的小提琴：

您需要绕过此行为，因为类名将为您获取第一个条目（在您的情况下，您的ID=top，而不是bottom）。要定位底部，您需要自己进行一些绑定

我创建了一个函数setupPaginators（），它在doc ready期间和页面按钮单击更改时使用，以保持顶部和底部同步（不使用插件默认行为）

$('.sync-pagination').twbsPagination({
    totalPages: 20,
    onPageClick: function (evt, page) {
        $('#sync-example-page-content').text('Page ' + page);
        console.log(evt);
    }
});

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
    }));
}