Ajax call not working except first page of data table

Question

I am trying to increase or decrease seats of a trip via ajax call in a data table. It works fine on the first page. But when I try the same thing on a second or third page of data-table the page reloads and the value remains unchanged. Here is my code:

 $(function(){ $('form#changeSeats').submit(function(e){ e.preventDefault(); var formData = new FormData(this); $.ajax({ type: 'POST', async: false, url: "/backend/deal/increase", data: formData, success: function(data){ $("#seats"+data[1]).text(data[0]); }, cache: false, contentType: false, processData: false }); }); }); 

Answer 1

I guess you should remove Self-Invoking Functions ie function(){}.

Use this code after calling the Datatable

$('form#changeSeats').submit(function(e){
       e.preventDefault();
           var formData = new FormData(this);
           $.ajax({
                type: 'POST',
                async: false,
                url: "/backend/deal/increase",
                data: formData,
                success: function(data){
                    $("#seats"+data[1]).text(data[0]);
                },
                cache: false,
                contentType: false,
                processData: false
            });
 });