jquery event listeners not work after refreshing my jquery dataTables?

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

Rory McCrossan · Accepted Answer · 2013-01-27 13:07:28Z

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.

answered Jan 27, 2013 at 13:07

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Homam Over a year ago

small neat also dirty thing to consider thanx so much @rory mccrossan

Collectives™ on Stack Overflow

jquery event listeners not work after refreshing my jquery dataTables?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related