jQuery doesn't work on secondary pages (DataTables) - php

Question

I have a simple table (created with DataTables), with a final column filled with 2 buttons. These buttons are connected to jquery. The problem is next: If I'm on first page of table and I press one of the buttons, everything works fine. If I press same button on second / third /etc page, function doesn't work anymore... Can you explain me why ? It's first time when I meet this problem. Thank you !
Buttons call jQuery with class, not Id (just a little note)
EDIT:
$('.generare_diploma').click(function(){
var user_id = $(this).attr('id').split('-');
if(user_id[1] != ''){
$.ajax ({
url: "./genereaza.php",
type: "POST",
data: {user_id:user_id[1],todo:'generare_diploma_admin'},
cache: false,
success: function(){
$('#diploma-'+user_id[1]).attr('onclick',location.href = './genereaza.php?user_id='+user_id[1]+'&todo=download_diploma_admin');
},
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
}
});
And this is how my anchor looks like:
<a id="diploma-'.$user['user_id'].'" class="btn btn-sm btn-success generare_diploma" data-toggle="tooltip" title="Genereaza diploma !"><i class="fa fa-calendar-check-o"></i></a>

Answer 1

$(document).on('click', '.generare_diploma',function(){
var user_id = $(this).attr('id').split('-');
if(user_id[1] != ''){
$.ajax ({
url: "./genereaza.php",
type: "POST",
data: {user_id:user_id[1],todo:'generare_diploma_admin'},
cache: false,
success: function(){
$('#diploma-'+user_id[1]).attr('onclick',location.href = './genereaza.php?user_id='+user_id[1]+'&todo=download_diploma_admin');
},
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
}
});
EDIT: jQuery is only aware of the elements in the page at the time it runs, so new elements added to the DOM are unrecognized by jQuery. To combat the problem use event delegation, bubbling events from newly added items up to a point in the DOM which was there when jQuery ran on page load. Many people use document as the place to catch the bubbled event, but it isn't necessary to go all the way up the DOM tree. Ideally you should delegate to the nearest parent existing at the time of page load.

Answer 2

You use .click event on element who are not yet on the dom when you init it.
So you have to init that fonction each time you get new lines in your DataTable or to add a listener with .on(
Since newest jQuery version .on( event has change. Now your principal element have to be present in your DOM when you init the fonction, you can add listener on new elements who gonna be made with DataTable (when you change page with a pagination for example).
so your code : $('.generare_diploma').click(function(){
has to be : $(document|'body'|selector).on('click','.generare_diploma',function(){
But in case that you have to init more than one time , often better to had a .off before your .on( like : $(document|'body'|selector).off('click','.generare_diploma').on('click','.generare_diploma',function(){