jQuery pagination plugin event target

Question

I'm using the jQuery pagination plugin seen here:

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 . 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/

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

Please find a working fiddle here: 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). 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(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
    }));
}