binding to click event - event only fires once

Question

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

score 9 · Answer 1 · answered Apr 27 '11 at 18:43

9

use live to bind the click event

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

answered Apr 27 '11 at 18:43

Naren Sisodiya

7,158
2
24
35

Such quick responses! That works. Should have thought of it. Thanks!! – Tac Apr 27 '11 at 18:58

score 3 · Answer 2 · answered Apr 27 '11 at 18:45

3

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

answered Apr 27 '11 at 18:45

Mark Coleman

40,542
9
81
101

Thanks!! Learned something new about events. – Tac Apr 27 '11 at 19:00

score 1 · Answer 3 · answered Apr 27 '11 at 18:45

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

score 1 · Answer 4 · answered Apr 27 '11 at 18:46

1

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.

answered Apr 27 '11 at 18:46

ampersand

4,264
2
24
32

Thanks!! Also don't need to make event a parameter. – Tac Apr 27 '11 at 19:00
short answer: If you don't use the `event` variable, then no you don't need to specify it in the function definition. (it is passed to the function nonetheless...and you _could_ access it, but that's for another post...) – ampersand Apr 27 '11 at 19:07

score 0 · Answer 5 · answered Dec 23 '13 at 08:50

0

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

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

answered Dec 23 '13 at 08:50

ray6080

873
2
10
25

binding to click event - event only fires once

5 Answers5