jquery events on advanced datatables

Question

I retrieve some records from database and showing in data table and i use jquery event .click on [Click to Pay] button it works fine in first page of the table but when i use table pagination next .click event on button didn't work

This is my code

$('.pay-btn').click(function (e) {
            var payBTN = $(this);
            var row = $(payBTN).closest('tr');
            var bankID = parseInt( $(row).find('.bankAccountID').val() );
            var id = payBTN.prop('id');
            if(bankID){
                $.ajax({
                    url: '{{url("/")}}/tenancycontracts/setpaymentpaid',
                    data: {id: id, bankID: bankID},
                    success: function (data) {
                        if (data == 'paid') {
                            payBTN.parent().html('<a class="btn btn-success"><i class="icon-ok"></i> Paid</a>');
                        }
                    }
                });
            }else{
                alert('Select Bank.');
            }
        });

I'm Using laravel 4.2

Answer 1

Use a delegated event handler :

$('#table').on('click', '.pay-btn', function(e) {

dataTables inject and remove table rows to the DOM in order to show pages. Thats why your event handler not is working except from page #1.

NB: Dont know what your <table> id is - replace #table with your id.