jquery DataTables не позволяет открывать модальный dialog после 10 линий

Я появляется проблема в момент использования jquery Datatables, не, из-за которого он не позволяет мне открывать модальный dialogs, который они названы после линии 10, все функционирует нормально в линиях 1 - 10 из таблицы, однако не, который происходит, что все остальные не удаются, так как в консоли и в network chrome он не показывает мне никакой ошибки, даже выполняют хорошо вызовы ajax, что у меня есть, проблема состоит в том, что они не открывают себе модальный dialogs, код, который у меня есть, - следующий:

Названная Datatables:

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

Создание таблица html:

public function tablaDet($arreglo, $tipo, $tipoeq){
    $r = json_decode(json_encode($arreglo),TRUE);
    $th = array_keys($r[0]);
    /*echo "
";
    print_r($r);*/
    switch ($tipo) {
      case 'lista':
          $t = "";
          $t .= "";
          $t .= "";
          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 .= "";
            }
          }
          $t .= "";
          $t .= "";
          $t .= "";
          $t .= "";
          $t .= "";
          $t .= "";
          foreach ($r as $files) {
            $t .= "";
            foreach ($files as $cols => $col) {
              if ($cols != "identificador") {
                $t .= "";
              }
            }

            $t.='';
            $t.='';
            $t.='';
            $t .= "";
          }
          $t .= "";
        $t .= "
".$head."DetallesActualizarEliminar
"; $t .= $col; $t .= "
"; break; default: # code... break; } return $t; }

Открывать модальный 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

Здесь я помещаю проблему в jsfiddle https://jsfiddle.net / s5w74xe7 / 1 /

5
задан 31.05.2017, 22:25
3 ответа

Неудача - следующая: ты присоединяешь драйвер события click когда будут верить в страницу:

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

Но в момент страница создается, только есть некое число элементов в таблице (10 в частности), так что, когда ты листаешь или меняешь число элементов на страницу, у этих новых элементов нет никакого драйвера присоединенного события.

Чтобы решать, используй события, уполномоченные с .on() и уже оно ты будет функционировать. Только ты был бы должен менять код наверху в это:

$('body').on("click", ".view_activo", function(e) {
  e.preventDefault();
  dialog.dialog('open');
});

Ты можешь видеть это в этом JSFiddle: https://jsfiddle.net / s5w74xe7 / 2 /

2
ответ дан 24.11.2019, 14:28
  • 1
    ok, большое спасибо, я функционирую в perfecci и # 243; n. –  Juan Pinzón 10.05.2016, 17:11

Она soluciГіn @Alvaro Montoro - correctГ-пропасть. Другая soluciГіn, что со мной случилось, состоит в том, чтобы слушать событие draw таблицы и направлять в instanciar драйвер события. My fiddle aquГ - . (Это немного "халтура", но hey functiona!!)

4
ответ дан 24.11.2019, 14:28
  • 1
    Большое спасибо из-за того, что он отвечает, - хорошая альтернатива, спасибо. –  Juan Pinzón 10.05.2016, 17:18
  • 2
    Этот soluci и # 243; n функционируй, но видь осторожно: не подтверждается, если bot и # 243; n он считает событие присоединенным уже, и тогда присоединяться и # 225; тот же acci и # 243; n снова и снова каждый раз, когда вырисовалась таблица. Например: увидь в эту versi и # 243; n измененная твоего JSFiddle , открой консоль языка сценариев JavaScript, изменись n и # 250; морской окунь реестров от 10 до 25 и снова в 10 несколько раз, нажимает в лупе в любой из линий, в консоли видеть и # 225; s, что сообщение " event" он является несколькими разами (одна из-за каждый раз, когда asoci и # 243; драйвер события click) –  Alvaro Montoro♦ 10.05.2016, 17:25
  • 3
    Снова у тебя есть весь raz и # 243; n, не ca и # 237; в этом. soluci и # 243; n из-за той, которая я выбрал, это перед тем, как распределять событие click, удалять любой драйвер этого события с м и # 233; каждый off () jquery. Fiddle: jsfiddle.net/s5w74xe7/5 –  Jose Hermosilla Rodrigo 10.05.2016, 17:34
  • 4
    Функционируй гениально:) –  Alvaro Montoro♦ 10.05.2016, 17:36
  • 5
    Немного халтура мой soluci и # 243; n. Я несомненно выбирать и # 237; за твоей. Много м и # 225; s ясная и краткая. Спасибо за осознавание ошибки!:-) –  Jose Hermosilla Rodrigo 10.05.2016, 17:42

я это сделал с кнопками, прицел этот https://jsfiddle.net/lburgos/8zajd3fe/5 /

я sirviГі много твой пример ГЃlvaro Montoro , спасибо за это, я смог приспосабливать это к кнопкам, большое спасибо, Бог благословил их.

             $('body').on("click", "button[id=btnEdit]", function(e) {

            var estado_id       = $(this).data("estado_id");          
           $('#modal-edit').modal('show');

              $("#new_estado_id").val(estado_id);


        });  

 $(function () {
    var table = $('#example1').DataTable({
      'colReorder'  : true,
      'paging'      : true,
      'lengthChange': true,
      'searching'   : true,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : true,
      'order'       : [[ 2, "desc" ]]   
    })
  })

             $('body').on("click", "button[id=btnEdit]", function(e) {

                var estado_id       = $(this).data("estado_id");          
               $('#modal-edit').modal('show');

                  $("#new_estado_id").val(estado_id);
                             
                  
            });   
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.6/b-html5-1.5.6/r-2.2.2/datatables.min.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


</head>
<body>
  
  <table id="example1" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example1_info">
                <thead>
                    <tr role="row">
                      <th >Acciones</th>
                      <th >Usuario</th>
                      <th >Nombre</th>
                      <th >Estado</th>
                    </tr>
                </thead>
                <tbody>
 <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>

                 <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr> <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>

                 <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>

                 <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
 <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>

                 <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>                                                    
                 <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>

                 <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>                  
                </tbody>
                <tfoot>
        <tr>
          <th>Acciones</th>
          <th>Usuario</th>
          <th>Nombre</th>
          <th>Estado</th>
        </tr>
    </tfoot>
  </table>

<div class="modal fade bs-example-modal-lg" id="modal-edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog ">
                <div class="modal-content">  
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          
                        <div class="col-xs-12 col-md-12">
                            <div class="form-group">
                                <h4 class="modal-title" id="gridSystemModalLabel"><u>Datos</u></h4>    
                            </div>

                        </div>

                </div>                                
                <div class="modal-body">
                    
              
                        
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                              <label>Estado</label>
                              <div class='input-group'>
                                <select id="new_estado_id" class="form-control">

                                          <option value="2">Estado 2</option>
                                          <option value="4">Estado 4</option>
                                          <option value="6">Estado 6</option>
                                          <option value="8">Estado 8</option>

                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-scale"></span>
                                </span> 
                                </select>                             
                              </div>
                            </div>
                        </div>


                        <div class="col-md-6 col-sm-6">    
                            <div class="form-group">
                              <label>Nombre</label> 
                              <div class='input-group'>
                                <input type="text" class="form-control" id="new_nombre" placeholder="nombre">
                                <span class="input-group-addon">
                                    <span class="fa fa-medkit"></span>
                                </span>                             
                              </div>
                            </div>   
                        </div>   
                  
                                                     
                    
                </div>
                    
                <div class="modal-footer">
                    <input type="hidden" id="id_registro" value="">
                  <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i> Cerrar</button>
                  <button type="button" class="btn btn-primary" id="updateEstadoCarta">Actualizar</button>
                </div>                                
                </div>
              </div>
            </div>   

              
              <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/af-2.3.3/b-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.js"></script>

</body>
</html>
0
ответ дан 24.11.2019, 14:28

Теги

Похожие вопросы