Delete button in datatables rows not binding correctly on init and fnDrawCallback

Question

I have a delete button in each row of my table which uses AJAX to get a json array and load the data. The .on() click event was outside of the fnDrawkCallback in the footer of the page. I thought putting it into the callback would fix this but it hasn't.

Each time the table loads from the first init, to any redraw from adding or deleting rows, when I click the delete button in any row only the top first row is deleted. Why is the on click event bound to that row's delete button?

The delete button has the .remImg class, the button is loading into the table from the json array as a key value.

Thanks

  var oTable =  $('#sss').dataTable({
        "oLanguage": {
            "sEmptyTable": "No data"
        },
        "bProcessing": true,
        "bServerSide": true,
        //"aaData": testdata,
        "sAjaxSource": 'http://example.com/sss.php',
        "aoColumns": [
    { "mDataProp": "date" },
    { "mDataProp": "action_buttons","bSortable": false } 
    ],
    "fnDrawCallback": function( oSettings ) {

          $(document).on("click", ".remImage", function(e) {

        jQuery.ajax({
            type: 'post',
            url: 'http://example.com/sss.php',
            data: {
                action: 'delete_post',
                att_ID: jQuery('#att_remove').val(),
                _ajax_nonce: jQuery('#nonce').val(),
                post_type: 'sss'
            },
            success: function( html ) {
                alert( html );
                $('#sss').dataTable().fnReloadAjax();               
            }
        });
    return false;
    });
        }
});

Answer 1

att_ID: jQuery('#att_remove').val(),

This will target only the first #att_remove value on the page, so only your first row is being deleted regardless of where you trigger the event from.

Use another method to access the value that doesn't rely on an id selector and you should get what you hope for.