jquery obtener el valor de un value button
Hola buenas tardes a todos,
tengo el siguiente problema llevo días intentando encontrar la solución pero hasta el día de hoy no lo he logrado.
se perfectamente como se obtiene el valor del atributo value con jquery pero en el código que he desarrollado ahora no logro obtener el valor solo obtengo el valor del primer value. La cosa es que estoy creando una tabla dinamicamente desde jquery y también genero un button yo quería obtener los valores de cada uno de los button al pinchar sobre el pero solo obtengo el primer valor.
El problema es que así solo obtengo el value del primer button. Y creo que esto sucede porque al hacer "$(table).appendTo('.tabla');" la tabla se añade al <div class="tabla"></div>
$(".tabla").click(function() {
var v =$(".tabla .eliminar").val();
alert(v);
});
Dejo el código completo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Marketing Digital Networks</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></script>
<meta name="description" content="Marketing Digital Network" />
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#crear_tabla").click(function() {
var table = document.createElement("table"); // Se crea el elemento table
for (i=1; i<=6; i++) {
var tr = document.createElement("tr"); // Se crea el elemento fila
var td = document.createElement("td"); // Se crea el elemento columna
td.setAttribute("width", "20%");
td.innerHTML ="Prueba" + i;
tr.appendChild(td);
var td = document.createElement("td");
td.setAttribute("width", "20%");
td.innerHTML ="Prueba" + i;
tr.appendChild(td);
var td = document.createElement("td");
td.setAttribute("width", "20%");
td.innerHTML ="Prueba" + i + '<button value="' + i + '" class="eliminar">Eliminar</button>';
tr.appendChild(td);
table.appendChild(tr); // Se añade la fila a la tabla
}
$(table).appendTo('.tabla'); // se añade la tabla al div cuyo nombre es tabla
});
$(".tabla").click(function() {
var v =$(".tabla .eliminar").val();
alert(v);
});
});
</script>
</head>
<body>
<div class="tabla"></div>
<button style="margin-bottom: 10px;" id="crear_tabla" class="btn">Crear tabla</button>
</body>
</html>
Agradecería que me ayuden ya que esto es muy importante lo necesito solucionar para mi proyecto que estoy haciendo en la universidad. Muchas gracias a todos.