的jQuery插件分頁事件目標

Question

我用在這裏看到了jQuery插件分頁：

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

正如你可以在文檔中看到，有一個「同步分頁元素」的部分。我正在使用此功能將分頁控件放置在內容的底部和頂部。

但是，當點擊底部分頁元素時，我想實現一些特殊的滾動行爲，不應該發生頂部分頁元素被點擊。

我想我可以只使用event參數來onPageClick回調，然而，似乎如果我點擊頂部或底部分頁不管，事件總是列出前分頁爲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 =頂部，而不是底部）。要瞄準底部，你需要做一些你自己的綁定。

我創建了一個函數setupPaginators（），它在doc準備期間以及頁面按鈕單擊更改時保持頂部和底部同步（不使用插件默認行爲）時使用。

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