jQuery分頁插件事件目標

Question

我正在使用此處看到的jQuery分頁插件：

http://esimakin.github.io/twbs-pagination/

如您在文檔中所見，其中有一個“同步分頁元素”部分。 我正在使用此功能將分頁控件放置在內容的底部和頂部。

但是，當單擊底部的分頁元素時，我要實現一些特殊的滾動行為，而單擊頂部的分頁元素不會發生這種情況。

我以為我可以只使用onPageClick回調的event參數，但是，無論單擊頂部還是底部分頁，事件總是將頂部分頁列為currentTarget 。 為什么即使單擊底部分頁控件也會出現這種情況？ 這是一個小提琴來演示：

http://jsfiddle.net/flyingL123/qerexw0L/1/

的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

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

Answer 1

請在此處找到可用的小提琴： http : //jsfiddle.net/2vL4addq/

您需要解決此問題，因為類名將使您獲得第一個條目（在您的情況下，您的ID = top，而不是bottom）。 要定位底部，您需要做一些自己的綁定。

我創建了一個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
    }));
}