Hi I have the following datatable

'''
var tblProperties = $('.dt_basic').dataTable({
ajax: "data/upcomingActivity.json",
"scrollY": "200px",
"paging": false,
"info": false,
"sDom": "<'dt-toolbar'<'col-sm-6 col-xs-12 hidden-xs'l>r>" +
"t",
"autoWidth": true,
"fnDrawCallback": function () {
fixTable();
},
"aoColumns": [
/* Property / null,
/ Address / null,
/ BDs / null,
/ Rent / null,
/ Status / null,
/ PropertyID / {"bVisible": false},
/ UnitID / {"bVisible": false},
/ CurrentTenantID */ {"bVisible": false}
]
});
'''
In fixTable I run:
'''
$(".dt_basic tbody tr").off().on({click: function (e) {
openMenu(e, this);
}, contextmenu: function (e) {
openMenu(e, this);
}});
function openMenu(e, row) {
$("#contextMenu")
.show()
.css({position: "absolute",
left: getLeftLocation(e),
top: getTopLocation(e)})
.off('click')
.on("click", function () {
$(this).hide();
var pos = tblProperties.fnGetPosition(row);
var id = tblProperties.fnGetData(pos)[5];
alert(id);
});
}
'''

After doing this there is a javascript error with datatables and all the hidden fields become visible.

If I simply attach an event to $(".dt_basic tbody tr").off().on("click", function() then all is fine.

Does anyone know what the problem could be?