JQuery onclick listener for anchor class on ace:dataTable paginator

Question

I want to add a click event listener for pages in ace:dataTable paginator.

Paginator looks like this.

<span id="yui-pg0-0-pages" class="ui-paginator-pages">
    <span class="ui-paginator-page ui-state-default ui-corner-all ui-paginator-current-page ui-state-active">1</span>
        <a page="2" class="ui-paginator-page ui-state-default ui-corner-all" href="#">2</a>
        <a page="3" class="ui-paginator-page ui-state-default ui-corner-all" href="#">3</a>
        <a page="4" class="ui-paginator-page ui-state-default ui-corner-all" href="#">4</a>
        <a page="5" class="ui-paginator-page ui-state-default ui-corner-all" href="#">5</a>
        <a page="6" class="ui-paginator-page ui-state-default ui-corner-all" href="#">6</a>
</span>

I tried to add a click listener for the class ui-paginator-page. This fires only for the first time. I used jQuery on(), live() and click(). All of them fire only once. I want it to be fired every time user clicks on the class ui-paginator-page. How can I do that.

Here is the ace:dataTable demo. http://icefaces-showcase.icesoft.org/showcase.jsf?grp=aceMenu&exp=dataExporterBean

Thanks!

Answer 1

http://fiddle.jshell.net/prollygeek/txS7a/

$("#yui-pg0-0-pages .ui-paginator-page").on("click",function(){alert("hi")})

there must be something wrong else where !

Answer 2

try this

$(document).ready(function(){
$(document).on('click','.ui-paginator-pages > a.ui-state-default',function(e)
{
 alert(e.value);
});
});