Calling JavaScript function from PagedListPager doesn't work

Question

I have a Html PagedList like below,

<div id="contentPager">
    @Html.PagedListPager(Model, page => Url.Action("ServerPaging", new { page }))
</div>

And this is the output HTML for pager,

<div id="contentPager">
     <div class="pagination-container">
        <ul class="pagination">
            <li class="active">
                 <a>1</a>
            </li>
            <li>
                 <a data-ajax="true" data-ajax-method="Get" data-ajax-mode="replace" data-ajax-update="#targetContainer" href="/MyController/ServerPaging?page=2">2</a>
            </li>
            <li>
                 <a data-ajax="true" data-ajax-method="Get" data-ajax-mode="replace" data-ajax-update="#targetContainer" href="/MyController/ServerPaging?page=3">3</a>
            </li>
        </ul>
     </div>
</div> 

I want the click event Javascript function to be called when I click page numbers from this pager without going to server action ServerPaging. This is how I have implemented the Javascript event listener.

$(document).on("click", "#contentPager a", function () {
            //............
        });

But it's still calling the server action ServerPaging.

Answer 1

Remove the Url from the href property and set to void function.

    <a data-ajax="true" data-ajax-method="Get" data-ajax-mode="replace" 
data-ajax-update="#targetContainer" href="javascript:void(0)" data-pageno="2" >2</a>

Then you need to get the page number from the data-pageno attribute in the event function:

$(document).on("click", "#contentPager a", function () {
    var pNo = this.data("pageno");
    alert(pNo);
});