Making rows and cells clickable.

sneeble

I have a scenario whereby I would like to make a row clickable to bring up the full record and have an action button (Delete record) in the last column to call my delete record Ajax.

I am using a rowCallback on the row:

    "rowCallback": function (row, data) { 
        $(row).on('click', function() {
            location.href="/admin/accounts/"+this.getAttribute('data-id');
        });
    },

and in my source data,

<a href="/admin/accounts/19" alt="Delete Record" data-method="delete" title="" data-toggle="tooltip" data-placement="left" rel="nofollow" data-confirm="Confirm Delete account test" class="btn btn-normal text-red btn-xs btn-link" data-original-title="Delete account test"><i class="fa fa-trash-o"></i></a>

However, I seem to have an event binding order issue whereby the Confirm delete dialog box appears, but when you click on OK, the rowCallBack handler is activated and rather than deleting the record, it takes you to my show record screen.

Surely someone else has come across a similar problem and resolved it?

I have tried to change my rowCallback to recognise the className of the delete object, but have had varying and unpredictable results - sometimes it works and sometimes it doesn't.

    "rowCallback": function (row, data) {
        $(row).on('click', function(data) {
            if (typeof data.target.className != "undefined") {
                if (data.target.className == "fa fa-trash-o") {
                    return; 
                }
            }
        location.href="/admin/accounts/"+this.getAttribute('data-id');
    });

Any suggestions or recommendations are greatly appreciated.