I'm using jquery to paginate an HTML table.

I have 2 CSS classes, aPage and thePage, a javascript function that creates a pagination string, and jquery code to bind each "page" to the click event so that the pagination string is calculated when the page is clicked.

My problem is that the click event only fires once, though I want it to fire each time a page is clicked.

Any help is greatly appreciated. Thanks!!

My javascript/jquery code is:

var thisPage=1; npages=10;
 //initial pagination
  $("#pag").html(showPag(thisPage,npages));

 //  bind pagination string to click event
     $(".aPage").click(function(event){
           var thisPage=$(this).text()
     $("#pag").html(showPag(thisPage,npages));
     });
 // function that returns pagination string
     function showPag(thisPage,npages) {
     p="";
     for(i=1;i<=10;i++){
     if(i==thisPage) {
     p+="<span class='thePage'>"+i+"</span>"
      }
     else {p+="<span class='aPage'>"+i+"</span>" }
     }
     return p;
   }

I'm using jquery to paginate an HTML table.

I have 2 CSS classes, aPage and thePage, a javascript function that creates a pagination string, and jquery code to bind each "page" to the click event so that the pagination string is calculated when the page is clicked.

My problem is that the click event only fires once, though I want it to fire each time a page is clicked.

Any help is greatly appreciated. Thanks!!

My javascript/jquery code is:

var thisPage=1; npages=10;
 //initial pagination
  $("#pag").html(showPag(thisPage,npages));

 //  bind pagination string to click event
     $(".aPage").click(function(event){
           var thisPage=$(this).text()
     $("#pag").html(showPag(thisPage,npages));
     });
 // function that returns pagination string
     function showPag(thisPage,npages) {
     p="";
     for(i=1;i<=10;i++){
     if(i==thisPage) {
     p+="<span class='thePage'>"+i+"</span>"
      }
     else {p+="<span class='aPage'>"+i+"</span>" }
     }
     return p;
   }

• javascript
• jquery
• pagination
• jquery-click-event

5 Answers 5

use live to bind the click event

 $(".aPage").live('click',function(event){
           var thisPage=$(this).text()
     $("#pag").html(showPag(thisPage,npages));
     });

Since you are destroying the old .aPage link everytime when you call .html() you will need to either use .live() or .delegate()

Using .live()

$(".aPage").live("click", function(event){
   var thisPage=$(this).text()
   $("#pag").html(showPag(thisPage,npages));
});

Using .delegate()

$("#pag").delegate(".aPage", "click", function(event){
   var thisPage=$(this).text()
   $("#pag").html(showPag(thisPage,npages));
});

You need to either rebind the click event to the spans you repopuplate the page with or you can just use either jQuery's delegate or live function. What is happening is that the way you are binding the click event only covers existing spans with the class aPage. Live or delegate will bind to existing and future:

$(".aPage").live("click", function(event){
           var thisPage=$(this).text()
     $("#pag").html(showPag(thisPage,npages));
     });

Well your click event is registered to elements of the class .aPage NOT the #pag element. If this element with class .aPage happens to be inside your #pag element (you did not specify, so I am just guessing here), it is destroyed when you replace the html of the page. To fix this bind the click handler to #pag.

You can also try the following:

change

$(".aPage").click(function(){...})

to

$(".aPage").live('click',function(){...})

This will bind to all present and FUTURE elements with that className.

Since jQuery 1.7, live is no longer supported, while delegate is remended.

$("#pag").delegate(".aPage", "click", function(event){
    var thisPage=$(this).text()
    $("#pag").html(showPag(thisPage,npages));  
});