Uncaught SyntaxError: Invalid regular expression: /(^|\.)DT_details\.(?:.*\.|)dt(\.|$)/

09wattry

I am trying to use jQuery to expand a child row on a click see JSFiddle link. When I click on the row it seems that a stack overflow occurs. I believe this is on line 5118 in version 1.10.20. I have added the debugging tool to the JSFiddle.

$('#people').on('click', 'tr', function() {
  var dcontrol = this.firstChild;

  $(dcontrol).trigger('click');
});

Uncaught SyntaxError: Invalid regular expression: /(^|\.)DT_details\.(?:.*\.|)dt(\.|$)/: Stack overflow
    at Object.remove (datatables.js:5118)
    at HTMLTableElement.<anonymous> (datatables.js:5597)
    at Function.each (datatables.js:366)
    at jQuery.fn.init.each (datatables.js:201)
    at jQuery.fn.init.off (datatables.js:5596)
    at _Api.<anonymous> (datatables.js:22064)
    at _Api.off (datatables.js:19953)
    at __details_events (datatables.js:21049)
    at __details_display (datatables.js:21034)
    at _Api.<anonymous> (datatables.js:21150)

kthorngren

The problem has to do with the code you posted above:

$('#people').on('click', 'tr', function() {
  var dcontrol = this.firstChild;

  $(dcontrol).trigger('click');
});

Removing that eliminates the infinite loop as shown here:
https://jsfiddle.net/8op4ymha/

Basically its causing going back and forth between that event and the $('#people').on('click', 'td.details-control', function() { event. What are you trying to do with this code?

Kevin

09wattry

Hi there,

I am trying to use jQuery to expand a child row on a click on anywhere on the row.

kthorngren

Change selector used for your child rows to something like this:

 $('#people').on('click', 'tr', function() {
  var tr = $(this).closest('tr');
  var tdi = tr.find('span.glyphicon');
  var row = table.row(tr);

  if (row.child.isShown()) {
.....

Note I also removed the above code.

Your updated example:
https://jsfiddle.net/Lu042mko/

Kevin

09wattry

Thanks Kevin!