Question

i have a page with a large table populated by dataTables.
i have to show several tables so every time i delete whole table and its container and reinitialis a new table but after i refresh the table and load it again all my event listeners disapear.
only a few mouse clicks works and not even work right.
i nest all my functions in a pyramid order so i can call the bottom functions with 1 or 2 key functions, but recalling them did not worked too.
so i switched on using jquery .on but it did not worked to.
here is one of my .on functions as example:

$('body #dataTable tbody').on('blur keyup', 'div.confirm-edit #tmp', function(e){
    if(e.type === 'blur' || (e.type === 'keyup' && e.which === 13)){
        confirmCurrentActive();
    }
    if(e.type === 'keyup' && e.which === 27){
        cancelCurrentActive();
    }
}); 

so i am here and do not know how to solve this

Answer 1

You need to hook the selector to an element which will always be available in the page from load. If you are removing/adding the table element this isn’t what you want to use, so instead of:

$('body #dataTable tbody').on(...

Use:

$('body').on(...

Note, while this will work, you should change body to be the closest parent element to the table which you are not dynamically adding after page load – like a div container or some such.