我无法从具有相同类的不同按钮中获得不同的值

Question

大家好，提前致谢。

我正在尝试获取一个模式来查看在计算机上制作的不同版本。 我有以下按钮结构，名为“Ficha”的绿色按钮打开一个带有 PC 规格的模式。电话First Modal called "ventanaFichaPortatil"

打开的modal如下 Second modal called ventanaControlCambios

每个“Ver cambios”按钮都包含我们要查看更改的 PC 的标识符。到现在为止还挺好。问题是当我第二次尝试检索按钮的 id 时，即第一次它很好地捕获它，但是如果我们从另一台 PC 打开另一个模态，则 ID 第一次就消失了。我使用的功能如下

    $("button[id=verControlCambios]").click(function(){
    var identificativo =  $(this).data('id');
    alert(identificativo);
    // This is to open the second modal
    var modal = $('#ventanaControlCambios');
    $('#ventanaControlCambios').modal('show');
    $('#ventanaControlCambios').css("max-height", $(window).height());
    $('#ventanaControlCambios').css("overflow-y", "scroll");
    $('#ventanaControlCambios').modal('handleUpdate');
});

Identificativo 始终具有我们首先单击的计算机的 ID。如果您需要更多信息或其他信息，请询问我

HTML 代码

    <div class='modal fade' id='ventanaControlCambios' tabindex='-1' role='dialog' aria-labelledby='#ventanaControlCambios'>

          <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>
                        <h4 class='modal-title' id='tituloFicha'></h4>
                    </div>
                    <div id='filas' class='modal-body'>

                    </div>
                    <div class='modal-footer'>
                        <center>
                        <button type='button' class='btn btn-danger' data-dismiss='modal'><i class='fa fa-times'></i> Cerrar</button>
                        </center>
                    </div>
                </div>
            </div>
        </div>






    <div class='modal fade' id='ventanaFichaPortatil' tabindex='-1' role='dialog' aria-labelledby='#ventanaFichaPortatil' 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>
                    <h4 class='modal-title' id='tituloFicha'></h4>
                    </div>
                <div class='modal-body'>
                    <center>
                    <h3 class='media-heading' id='nombreFichaPortatilV'></h3>
                    <h4 class='media-heading' id='MarcaYModeloV'><small></small></h4>
                    <h4 class='media-heading' id='EmpleadoV'><small></small></h4>
                    <span><strong></strong></span>
                        <span class='label label-info' id='serialnoV'></span>
                    </center>
                    <hr>
                    <center>
                    <p class='text-left'><strong>Memoria RAM: </strong>
                        <span class='label label-success' id='ramV'></span>
                    </p>
                    </center>
                    <center>
                    <p class='text-left'><strong>Procesador: </strong>
                        <span class='label label-success' id='procesadorV'></span>
                    </p>
                    </center>
                    <center>
                    <p class='text-left'><strong>Capacidad HDD: </strong>
                        <span class='label label-success' id='discoDuroV'></span>
                    </p>
                    </center>
                    <center>
                    <p class='text-left'><strong>Sistema Operativo: </strong>
                        <span class='label label-success' id='soV'></span>
                    </p>
                    </center>
                    <center>
                    <p class='text-left'><strong>Activo fijo: </strong>
                        <span class='label label-success' id='activoFijoV'></span>
                    </p>
                    </center>
                    <center>
                    <p class='text-left'><strong>Fecha compra: </strong>
                        <span class='label label-success' id='fechaCompraV'></span>
                    </p>
                    </center>
                    <center>
                    <p class='text-left'><strong>ClaveBIOS: </strong>
                        <span class='label label-success' id='ClaveBIOSV'></span>
                    </p>
                    </center>
                    <center>
                    <p class='text-left'><strong>Proveedor: </strong>
                        <span class='label label-success' id='ProveedorV'></span>
                    </p>
                    </center>
                    <center>
                    <p class='text-left'><strong>Ubicacion: </strong>
                        <span class='label label-success' id='UbicacionV'></span>
                    </p>
                    </center>
                </div>
                <div class='modal-footer'>
                    <center>
                    <button id='verControlCambios' data-relatedtarget='#wop' data-target='#ventanaControlCambios' type='button' class='vCC btn btn-default'><i class='fa fa-table'></i> Ver cambios</button>
                    <a id='QREquipoPC' href='' target='_blank'> <button type='button' class='btn btn-default'><i class='fa fa-qrcode'></i> QR</button> </a>
                    <a id='fichaCompletaEquipoPC' href='' target='_blank'> <button type='button' class='btn btn-default'><i class='fa fa-file-pdf-o'></i> Ficha completa</button> </a>
                    <a id='pdfEquipoPC' href='' target='_blank'> <button type='button' class='btn btn-warning'><i class='fa fa-folder-open-o '></i> PDF</button> </a>
                    <button type='button' class='btn btn-danger' data-dismiss='modal'><i class='fa fa-times'></i> Cerrar</button>
                    </center>
                </div>
            </div>
        </div>
    </div>
</div>
      </br>
      <div class='modal-footer'>
        <button type='button' class='btn btn-danger' data-dismiss='modal'><i class='fa fa-times'></i> Cerrar</button>
        <button type='button' class='btn btn-success btnControlCambios' id='editarPortatil'><i class='fa fa-floppy-o'></i> Guardar</button>
      </div>
    </div>
  </div>
</div><div class='container'><h1 id='tituloEquipamiento'><span class='glyphicon glyphicon-list-alt' aria-hidden='true'></span> Lista de equipamiento - Equipos activos</h1>
      </br></br>
    <div class='table-responsive'><table class='table table-hover table-condensed' id='tablaEquiposCyndea'>
      <thead>
        <tr>
          <th>Identificativo</th>
          <th>Marca y modelo</th>
          <th>Nombre Equipo</th>
          <th>Empleado</th>
          <th>Acciones</th>
        </tr>
      </thead>
      <tbody id='busqueda'><tr><td> 1</td>
      <td> MARCA MODELO</td>
      <td> </td>
      <td> </td>
      <td id='botones'>
      <button  class='btn btn-primary .submit' data-toggle='modal' data-target='#ventanaFichaPortatil' 
        data-id='1'
        data-mm='MARCA MODELO'
        data-ram=''
        data-prc=''
        data-hdd=''
        data-so=''
        data-ne=''
        data-sno=''
        data-fcm='2016-04-07'
        data-bs='' 
        data-emp='' 
        data-act=''
        data-pve=''
        data-ub=''
        >Ficha</button>



      <button value='1' id='desactivarEquipo' class='btn btn-danger .submit' value='1' data-nombre=''>Desactivar</button>
      </td></tr><tr><td> 2</td>
      <td> MARCA MODELO</td>
      <td> CYNDEA 21</td>
      <td> </td>
      <td id='botones'>
      <button  class='btn btn-primary .submit' data-toggle='modal' data-target='#ventanaFichaPortatil' 
        data-id='2'
        data-mm='MARCA MODELO'
        data-ram='4'
        data-prc='CORE i5'
        data-hdd='500'
        data-so='Windows 7'
        data-ne='CYNDEA 21'
        data-sno='9832642983'
        data-fcm='2014-07-08'
        data-bs='cyndea01' 
        data-emp='' 
        data-act='1983246'
        data-pve='Proveedor D eIT'
        data-ub='Open space 1'
        >Ficha</button>



      <button value='2' id='desactivarEquipo' class='btn btn-danger .submit' value='2' data-nombre='CYNDEA 21'>Desactivar</button>
      </td></tr><tr><td> 39</td>
      <td> HP ProDesk 400 G2</td>
      <td> Cyndea5216</td>
      <td> </td>
      <td id='botones'>
      <button  class='btn btn-primary .submit' data-toggle='modal' data-target='#ventanaFichaPortatil' 
        data-id='39'
        data-mm='HP ProDesk 400 G2'
        data-ram='88gb'
        data-prc='i9'
        data-hdd='2TB'
        data-so='W11'
        data-ne='Cyndea5216'
        data-sno='61561561sd561d56s51'
        data-fcm='2017-04-04'
        data-bs='as4da23sd' 
        data-emp='' 
        data-act='351561c'
        data-pve='ITS Duero'
        data-ub='Prueba'
        >Ficha</button>



      <button value='39' id='desactivarEquipo' class='btn btn-danger .submit' value='39' data-nombre='Cyndea5216'>Desactivar</button>
      </td></tr><tr><td> 40</td>
      <td> HP ProDesk 400 G2</td>
      <td> Cyndea526</td>
      <td> </td>
      <td id='botones'>
      <button  class='btn btn-primary .submit' data-toggle='modal' data-target='#ventanaFichaPortatil' 
        data-id='40'
        data-mm='HP ProDesk 400 G2'
        data-ram='88gb'
        data-prc='i9'
        data-hdd='2TB'
        data-so='W11'
        data-ne='Cyndea526'
        data-sno='61561561sd561d56s51'
        data-fcm='2017-04-04'
        data-bs='as4da23sd' 
        data-emp='' 
        data-act='351561c'
        data-pve='ITS Duero'
        data-ub='Prueba'
        >Ficha</button>




      <td id='botones'>
      <button  class='btn btn-primary .submit' data-toggle='modal' data-target='#ventanaFichaPortatil' 
        data-id='37'
        data-mm='OnePlus 3T'
        data-ram='574'
        data-prc='577'
        data-hdd='579'
        data-so='581'
        data-ne='585'
        data-sno='587'
        data-fcm='2017-03-27'
        data-bs='589' 
        data-emp='' 
        data-act='583'
        data-pve='sdoik'
        data-ub='Taller de informática'
        >Ficha</button>



      <button value='37' id='desactivarEquipo' class='btn btn-danger .submit' value='37' data-nombre='585'>Desactivar</button>
      </td></tr></tbody></table><div id='botonesTabla'></div></div></div></body> 

</html>

Answer 1

将click 更改为on。原因：https://stackoverflow.com/a/11878976/6429774

使用类而不是 id。一个 id 只能使用一次。

$("body").on('click', 'button[class=verControlCambios]', function(e){
    var identificativo =  $(this).data('id');
    console.log(identificativo);
    // other code
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="verControlCambios" data-id="test-button1">button1</button>
<button class="verControlCambios" data-id="test-button2">button2</button>

Answer 2

由于我无法将数据放入模式中，我终于在新的浏览器选项卡中使用新的 php 文件完成了。

非常感谢