2010-12-21 20 views
11

EDITAR: esto funciona, pero no estoy seguro de por qué?jquery - cada función/clic no funciona

$('button').each(function() { 
    $(this).bind(
     "click", 
     function() { 
      alert($(this).val()); 
     }); 
    }); 

No estoy seguro de por qué esto no está funcionando ... En este momento, sólo estoy tratando de salida de una alerta con el valor de botón, pero no está funcionando en mi página. No recibo ningún error de consola en Firebug y no puedo ver nada que impida que funcione.

Mi HTML se parece a esto:

<table id="addressbooktable"> 
<thead> 
    <tr> 
     <th>Name</th> 
     <th>Action</th> 
    </tr> 
</thead> 

<tbody> 
    <tr> 
     <td>7892870</td> 
     <td><button id="button-20" class="custom-action" value="XY89" name="info">Click</button></td> 
    </tr> 

    <tr> 
     <td>9382098</td> 
     <td><button id="button-21" class="custom-action" value="XY544" name="info">Click</button></td> 
    </tr> 

    <tr> 
     <td>3493900</td> 
     <td><button id="button-22" class="custom-action" value="XY231" name="info">Click</button></td> 
    </tr> 
</tbody> 
</table> 

Y el código es el siguiente:

$('button').each(function() { 
    $(this).click(function() { 
     alert($(this).val()); 
    } 
    }); 

Pero, al hacer clic en él no hace nada en absoluto? ¿Lo estoy usando incorrectamente?

+0

el problema, pero no es necesario el .Cada, puede use .haga clic en un objeto jQuery con más de un nodo y los vinculará a todos. – Shurdoof

+0

marque una respuesta? – hunter

Respuesta

20

Puede enlazar todos los botones con un evento de clic de esta manera, no hay necesidad de bucle a través de ellos

$(function(){ 
    $("button").click(function() { 
     alert($(this).attr("value")); 
    }); 
}); 

Pero un selector más preciso podría ser:

$(function(){ 
    $("button[id^='button-'").click(function() { 
     alert($(this).attr("value")); 
    }); 
}); 
+0

¡Gracias, esto funciona! –

+0

marca como respuesta? – hunter

+0

Esto es mucho más eficiente, ya que el selector ya tiene referencia a los elementos, en lugar de tratar cada elemento() como un elemento separado. – IamFace

0

Sí. Prueba esto:

$('button').click(function() { 
     alert($(this).val()); 
    }); 

También puede desear un return false o .preventDefault() allí.

0

No puede utilizar .val() método para el botón. Puede usar .attr() para obtener el atributo de valor. Si está utilizando atributos personalizados, utilice data-attribute.

Trate

$("button").click(function(){ 
    alert($(this).attr("value")); 
}); 
+0

Hola, gracias por las respuestas ... Después de publicar, usé "bind" y parece funcionar ... ¿Me pregunto si alguien puede explicar por qué funciona en este caso, pero no en el original? Estoy editando mi publicación para mostrar lo que lo cambié a ... –

+0

@ N00BNum1 - le faltaba un ');' en su código, por lo que no era válido ... vea mi respuesta :) –

7

te falta un );, y asegúrese de que el código está en un controlador document.ready, así:

$(function() { 
    $('button').each(function() { 
    $(this).click(function() { 
     alert($(this).val()); 
    }); //missing); here! 
    }); 
}); 

De esta manera no se ejecutará hasta que los <button> los elementos están en DOM para $('button') para encontrarlos. Además, puede ejecutar .click() en un conjunto de elementos, como esto:

$(function() { 
    $('button').click(function() { 
     alert($(this).val()); 
    }); 
}); 
+0

whoops, bien manchado +1 – lnrbob

1

Te faltan ):

$('button').each(function(){ 
      $(this).click(function(){ 
       alert($(this).val()); 
      }); 
     }); 
Probablemente no