added event listener to page link, but will be gone if page changed, how to keep it on all pages

surfing

Link to test case: http://live.datatables.net/yuvalixi/1/edit
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: I added an click event to the page link, but it can only run once, if click on the page navigation
it will alert you a msg, and bold the page navigation text, but it only works one time, once you click it,
the added event will be gone, how to keep it so all pages can have the same click event.

thank you

kthorngren

Looks like you need to use jQuery delegated events. I used the classname in the wrapping div as the selector. This makes me think the paging buttons are removed then re-added to the DOM when clicking the paging buttons.
http://live.datatables.net/tijenuxo/1/edit

Kevin

surfing

Thank you, but , strange, I tried
$(".paginate_button").on( "click", function( event ) {
it works like the code I use, only trigger once.

if I use
$(".paginate_button").on( "click","a", function( event ) {
it won't trigger.

http://live.datatables.net/yuvalixi/2/edit

kthorngren

Take a closer look at my example. The code looks like this:

  $(".dataTables_paginate").bind( "click", '.paginate_button', function() {
    alert( "User clicked on 'foo.'" );
    $(".paginate_button").css("font-weight", "bold");// by jun ok, this catches the page link

  });

It attaches the event handler to the div that the buttons are in, for example:

Kevin

surfing

Wow, I got it, Thank you so much, you rock!

surfing

@kthorngren

It seems if I use table.bind , I do not know the id I clicked,
how do you get the id of <a> that you click? because $(this) become the table.

surfing

$(".dataTables_paginate").bind( "click", '.paginate_button',function(event) {
//alert( event.target.id + $(this).text());
console.log("test"+ event.target.innerHTML); //this catches page number
$(".paginate_button").css("font-weight", "bold");// by jun ok, this catches the page link

This way it catches the page number, but I do not know how it works using jquery, event is more classic javascript

kthorngren

You can use jQuery to get the ID. Look at the screenshot above or inspect your paging buttons. You will see the ID of the div contains the table ID, in the test case the Id is example. Get the ID of that div then parse the table ID from it. Something like this:
http://live.datatables.net/tijenuxo/3/edit

Kevin

surfing

Yes , I know you can get the table id, but I was trying to get page number,
I do get it by event.target.innerHTML, it is just not jquery.

meanwhile, the
$(this).closest('.dataTables_paginate').attr('id');
is very slick. thanks