1

Buenas, estoy intentando aprender sobre jquery y durante mi practica me salto este problema:

Estoy haciendo una tabla cada fila posee un boton, ese botón abre un modal donde se muestra el contenido de la fila para "editar". Pero a la hora de trabajar con jquery, intente indicar al id del botón y no su clase, pero el modal solo se abría con la primera fila.

Así que decidí indicarlo con su clase y empezó a funcionar de forma normal.

Entonces mi duda es:

  • Porque al indicar la clase de mi boton el evento funciona, pero al indicar con el id del boton, no?
  • Porque solo me funcionaba con una fila?

Esto es mi código indicando al boton con su clase:

$(".btn-default").click(function(){
    $("#myModal").modal("show");
    $("#txtfname").val($(this).closest('tr').children()[0].textContent);
    $("#txtlname").val($(this).closest('tr').children()[1].textContent);
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
<div class="row">
    <div class="col-xs-12 col-md-12">
        <table class="table table-condensed table-hover table-bordered">
            <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td><button class="btn btn-default" id="btn-agregar">Agregar</button></td>
            </tr>
            <tr>
                <td>Amy</td>
                <td>Jhonson</td>
                <td><button class="btn btn-default" id="btn-agregar">Agregar</button></td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>Smith</td>
                <td><button class="btn btn-default" id="btn-agregar">Agregar</button></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
 </div>

<div class="modal fade" id="myModal">
  <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">EDIT</h4>
      </div>
      <div class="modal-body">
        <p><input type="text" class="input-sm" id="txtfname"/></p>
        <p><input type="text" class="input-sm" id="txtlname"/></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Y este es mi codigo indicando al boton con su ID:

$("#btn-agregar").click(function(){
    $("#myModal").modal("show");
    $("#txtfname").val($(this).closest('tr').children()[0].textContent);
    $("#txtlname").val($(this).closest('tr').children()[1].textContent);
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
<div class="row">
    <div class="col-xs-12 col-md-12">
        <table class="table table-condensed table-hover table-bordered">
            <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td><button class="btn btn-default" id="btn-agregar">Agregar</button></td>
            </tr>
            <tr>
                <td>Amy</td>
                <td>Jhonson</td>
                <td><button class="btn btn-default" id="btn-agregar">Agregar</button></td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>Smith</td>
                <td><button class="btn btn-default" id="btn-agregar">Agregar</button></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
 </div>

<div class="modal fade" id="myModal">
  <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">EDIT</h4>
      </div>
      <div class="modal-body">
        <p><input type="text" class="input-sm" id="txtfname"/></p>
        <p><input type="text" class="input-sm" id="txtlname"/></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Gracias de antemano.

2 respuestas 2

3

El problema no es jQuery, el asunto es que no puedes (no debes) utilizar un id más de una vez en un documento, por lo cual deberías tener un id distinto para cada botón:

        <tr>
            <td>John</td>
            <td>Doe</td>
            <td><button class="btn btn-default" id="btn-agregar1">Agregar</button></td>
        </tr>
        <tr>
            <td>Amy</td>
            <td>Jhonson</td>
            <td><button class="btn btn-default" id="btn-agregar2">Agregar</button></td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>Smith</td>
            <td><button class="btn btn-default" id="btn-agregar3">Agregar</button></td>
        </tr>

La especificación de html5 lo explica en el siguiente enlace (en inglés): https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute

Básicamente dice que el id de un elemento debe ser único.


Cuando le pasas el selector que contiene un ID a jQuery $('#id')..., le estás diciendo que hay solo un elemento en todo el DOM, por consiguiente solo te va a funcionar con el primer ID que encuentre jQuery.


Cuando usas una clase en cambio sí funciona, pues esta no es ùnica y se puede aplicar a cuantos elementos desees.

Aquí hay un enlace (en inglés) que te explica un poco más sobre los selectores de CSS (aunque jQuery agrega alguno que otro): https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier

1

Porque en html es ilegal tener más de un id repetido.

Jquery usa internamente document.getElementById para seleccionar por id. Este es el código utilizado. Como vez se asigna manualmente un solo elemento y se pone el length a 1.

elem = document.getElementById( match[2] );

// Support: Blackberry 4.6
// gEBID returns nodes no longer in the document (#6963)
if ( elem && elem.parentNode ) {
    // Inject the element directly into the jQuery object
    this.length = 1;
    this[0] = elem;
}

this.context = document;
this.selector = selector;
return this;

En el spec se puede leer

Retorna el elemento cuyo ID es elementId. Si no existe dicho elemento, retorna null. El comportamiento no está definido si más de un elemento tiene ese ID.

En su mayoría depende de la implementación del navegador pero en la documentación de document.querySelector explica

Si el selector coincide con un ID y este ID es usado erróneamente muchas veces en el documento, retorna el primer elemento encontrado.

Este es el comportamiento natural que encontrarás implementado en la mayoría de los navegadores.

$(function() {
  var botones = $('button');
  var ids = $('#miId');
  console.log('Botones seleccionados por id', ids.length);
  console.log('Botones seleccionados por tipo', botones.length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="miId"></button>
<button id="miId"></button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.