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">×</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">×</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.