jQuery doesn't work on secondary pages (DataTables)

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>

can you post the jquery code ? – Frankich Dec 19 '16 at 15:43 — Frankich, Dec 19 '16 at 15:43
I edited first post. – George Cristian Dec 19 '16 at 15:45 — George Cristian, Dec 19 '16 at 15:45

score 1 · Accepted Answer · edited May 23 '17 at 10:30

$(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.

It works :) Thank you. I'll accept this question as answer in 1 minute (Time requested by stackoverflow) — George Cristian, Dec 19 '16 at 15:49
Nice :) if you have to do it on a table like datatable use more this than the 'ordinary' jquery event look here : http://api.jquery.com/on/ — Frankich, Dec 19 '16 at 15:51
Do or do not. There is no "I think". A ***good answer*** will always have an explanation of what was done and why it was done in such a manner, not only for the OP but for future visitors to SO. — Jay Blanchard, Dec 19 '16 at 15:57

score 0 · Answer 2 · answered Dec 19 '16 at 16:09

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(){

jQuery doesn't work on secondary pages (DataTables)

2 Answers2