JQuery trigger exception
HTML
<script src="https://cdn.datatables.net/v/bs-3.3.7/jq-3.3.1/dt-1.10.20/datatables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs-3.3.7/jq-3.3.1/dt-1.10.20/datatables.css">
<table id="people" class="table table-striped table-condensed" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th class="text-center"><span class="text">Name</span></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
CSS
td.details-control {
text-align: center;
color: forestgreen;
cursor: pointer;
}
tr.shown td.details-control {
text-align: center;
color: red;
}
span.positive-icon {
color: forestgreen;
}
span.info-icon {
color: blue;
}
.child-row {
padding: 1px;
font-weight: 300 !important;
font-size: 14px !important;
}
JavaScript
table = $('#people').DataTable({
data: [
{
name: 'Some dev',
location: 'here',
age: 10,
job: 'dev'
}, {
name: 'Was some dev',
location: 'not here',
age: 42,
job: 'not dev'
}
],
fnCreatedRow: function(nRow, aData, iDataIndex) {
if (!nRow.id) {
nRow.id = 'row' + iDataIndex;
}
},
columns: [
{
className: 'details-control',
orderable: false,
searchable: false,
data: null,
defaultContent: '',
render: function(data, type, full, meta) {
if (full.reloadChildShown) {
return '<span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>';
} else {
return '<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>';
}
}
},
{
name: 'name',
data: 'name'
}
]
});
$('#people').on('click', 'td.details-control', function() {
var tr = $(this).closest('tr');
var tdi = tr.find('span.glyphicon');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
tdi.first().removeClass('glyphicon-minus-sign');
tdi.first().addClass('glyphicon-plus-sign');
} else {
// Open this row
row.child(_renderChildRow(row.data())).show();
tr.addClass('shown');
tdi.first().addClass('glyphicon-minus-sign');
tdi.first().removeClass('glyphicon-plus-sign');
}
});
/*
$('#people').on('click', 'tr', function() {
var dcontrol = this.firstChild;
$(dcontrol).trigger('click');
});
*/
function _createElement(elementType, attributes, innerHTML) {
var element = document.createElement(elementType);
// Add all the attributes the element contains.
if (attributes) {
Object.keys(attributes).forEach(function(key) {
element.setAttribute(key, attributes[key]);
});
}
// Adds html to the element if...