How to detect button click event inside child row?

yush

Hi,

I have the standard code which populates the datatable and shows child rows.
inside the child row (using the format finction) i have added a button and i want to do something when it's clicked but each time i click the button(data table contains child row inside a new tr->td) the event of td click which is used to open/close child rows is fired and i get "Uncaught TypeError: Cannot read property '0' of undefined" for the d[] array in format function.

This is the code for the child rows open/close:

$('tbody').on('click', 'td', function() {
var tr = $(this).closest('tr');
id = $(this).closest('table').attr('id');
table = $('#' + id).DataTable();
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(format(row.data(), id)).show();
tr.addClass('shown');
}
});

function format(d, id) {
// d is the original data object for the row
if(sessionStorage['name']!=undefined)
return '<img src="images/photo.jpg" id="photo" />' + '

Session created by:' + d[0] + '

' + '

Start Date:' + d.start_date + '

' + '

Extra info:' + d[3] + '

' + "<button class='btn btn-default' id='joinbutton' role='button'>Join Session</button>";
else
return '

' + '' + '

Session created by:' + d[0] + '

' + '

Start Date:' + d.start_date + '

' + '

Extra info:' + d[3] + '

' + '

';

}

Is there a way to either prevent the td click event from being fired for child rows or to detect the button click somehow?
Thanks