CODEWITHSUNDEEP
javascriptjqueryajaxjquery-selectorsdatatables
affectsoftware
affectsoftware

Reputation: 11

Why click event handler works on the first page only

In my "fnInitComplete" : function(oSettings, json) I have a selector like $('[id^=f_]').each(function ().

Datatables get its data server-side and "bProcessing":true

I know that my selectors will work only on the first page of my datatable and when I will change the page my functions will not work.

But what could be a solution to make this work even with ajax async loading. I do not want to give up ajax.

An example:

"fnInitComplete" : function(oSettings, json) {
$('[id^=r_]').each(function () {
    $(this).click(function(e) {
        alert('Foo');
        e.preventDefault();
    })
});
}

Works only for the first loaded rows datatables. Any suggestions?

Upvotes: 1

Views: 860

Answers (1)

Josep Julià López
Josep Julià López

Reputation: 36

Use on() to bind actions to elements that may not be on the DOM when the binding is done.

"fnInitComplete" : function(oSettings, json) {
    $(document).on('click', '[id^=r_]', function () {
        alert('Foo');
        e.preventDefault();
    })
}

Upvotes: 1

Related Questions