on('click') not working after add row by table.row.add({

mrs99mrs99

Hello all....

When my page first displays I have an edit and delete icon in the first column of each row. They work without any issues. However when I add a row using table.row.add({....} the row adds and everything looks okay until you click the edit or delete icon. I get this:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help

At this point the original icons and the new added row icons don't work.

function hookUpSportClickEvent() {
    $('#myTable').on('click', ' tbody td .editButtonSport', function () {
            -- do some work here
        });
}

hookUpSportClickEvent is called after the datatable has been created:

myTable= $('table#myTable').DataTable(

Any ideas why this is failing?

allan

Sounds like you are using async: false somewhere in an Ajax call. You'd need to make it synchronous to remove that error from Chrome.

Beyond that, we'd need a link to a page showing the issue.

Allan

mrs99mrs99

That's what I thought so I added async; true to all of my ajax:

$.ajax(
{
async: true,

The site isn't uploaded to anywhere yet. hmm, I'll see what I can do....thanks