javascript – jquery DataTables does not allow to open modal dialog after 10 rows

Question:

I have a problem when using jquery Datatables , I don't know why it doesn't allow me to open modal dialogs that are called after row 10, everything works normally in rows 1 – 10 of the table, however I don't know what happens all the others fail, since in chrome console and network it does not show me any error, even the ajax calls that I have are executed well, the problem is that the modal dialogs do not open, the code that I have is the following:

Data table call:

$(document).ready(function() {
  $('#datatab').DataTable()
}

Create html table:

public function tablaDet($arreglo, $tipo, $tipoeq){
    $r = json_decode(json_encode($arreglo),TRUE);
    $th = array_keys($r[0]);
    /*echo "<pre>";
    print_r($r);*/
    switch ($tipo) {
      case 'lista':
          $t = "<table id='datatab' class='display'>";
          $t .= "<thead>";
          $t .= "<tr>";
          foreach ($th as $heads => $head) {
            if ($head != "identificador") {
              switch ($head) {
                case 'nombre_depto':
                  $head = "Departamento";
                  break;
                case 'nombre_persona':
                  $head = "Funcionario Actual";
                  break;
                case 'dir_ip':
                  $head = "Dirección Ip";
                  break;
                case 'mac':
                  $head = "Dirección Física";
                  break;
                case 'nro_serie':
                  $head = "Nro. Serie";
                  break;
                case 'codigo_ebye':
                  $head = "Código EBYE";
                  break;
                case 'codigo_activo':
                  $head = "Código Activo";
                  break;
                case 'documentos':
                  $head = "Documentos";
                  break;
                case 'fecha_ingreso':
                  $head = "Fecha Ingreso";
                  break;
                case 'nombre_prod':
                  $head = "Nombre Producto";
                  break;
                case 'nombre_marca':
                  $head = "Marca";
                  break;
                case 'avaluo_inicial':
                  $head = "Avaluo Inicial";
                  break;
                case 'descr_procesador':
                  $head = "Procesador";
                  break;
                case 'nombre_modelo':
                  $head = "Modelo";
                  break;
                case 'nombre_cpu':
                  $head = "CPU";
                  break;
                case 'nombre_mon':
                  $head = "Monitor";
                  break;
                default:
                  # code...
                  break;
              }
              $t .= "<th>".$head."</th>";
            }
          }
          $t .= "<th>Detalles</th>";
          $t .= "<th>Actualizar</th>";
          $t .= "<th>Eliminar</th>";
          $t .= "</tr>";
          $t .= "</thead>";
          $t .= "<tbody>";
          foreach ($r as $files) {
            $t .= "<tr>";
            foreach ($files as $cols => $col) {
              if ($cols != "identificador") {
                $t .= "<td>";
                  $t .= $col;
                $t .= "</td>";
              }
            }

            $t.='<td><a href="#" class="view_'.strtolower($tipoeq).'" id="view_'.strtolower($tipoeq).''.$files['identificador'].'" onClick="obtener'.$tipoeq.'Det('.$files['identificador'].')"><i class="ui-icon ui-icon-circle-zoomout" style="color:black;"></i></button></td>';
            $t.='<td><a href="#" class="act_'.strtolower($tipoeq).'" id="act_'.strtolower($tipoeq).''.$files['identificador'].'" onClick="obtenerCpu('.$files['identificador'].')"><i class="ui-icon ui-icon-refresh" style="color:black;"></i></button></td>';
            $t.='<td><a href="#" onClick="eliminar'.$tipoeq.'('.$files['identificador'].')"><i class="ui-icon ui-icon-trash" style="color:black;"></i></a></td>';
            $t .= "</tr>";
          }
          $t .= "</tbody>";
        $t .= "</table>";
        break;
    default:
        # code...
        break;
    }
    return $t;
  }

Abrir modal Dialog:

$(function() {
      var dialog, form;

      dialog = $( "#details-cpu" ).dialog({
        autoOpen: false,
        height: 500,
        width: "80%",
        modal: true,
        buttons: {

          Cerrar: function() {
            dialog.dialog( "close" );
          }
        },
        close: function() {
          //form[ 0 ].reset();
        }
      });

      form = dialog.find( "form" ).on( "submit", function( event ) {
        event.preventDefault();
        //actUser();
      });

      $('.view_cpu').click(function(e) {
        e.preventDefault();
        dialog.dialog('open');
      });

      /*$( "#act_user" ).button().on( "click", function() {
        dialog.dialog( "open" );
      });*/
    });

EDIT

Here I put the problem in jsfiddle https://jsfiddle.net/s5w74xe7/1/

Answer:

@Alvaro Montoro's solution is very correct. Another solution I've come up with is to listen to the table's draw event and re-instantiate the event handler. My fiddle here . (It's a bit "sloppy" but hey it works!!)