jQuery a elementos dinámicos

Hola amigos, soy nuevo en la web.

Tengo un problemilla que me tiene comida la cabeza estos días y soy muy novato en el tema web.

Os comento, estoy haciendo una aplicación web más o menos tipo chat, tengo una serie de phps y mysql en mi servidor etc etc

El tema es, que una vez que he validado a un usuario le llevo a un php en donde creo un select (con opciones según me las de mysql). En base a esas opciones quiero mostrar una serie de botones debajo, uno con cada tema disponible para la opción seleccionada (esto me lo devuelve ajax de la base de datos)

Y aquí me viene el problema, como la lista de botones de abajo la genero de forma dinámica gracias al ajax, luego no sé cómo asociarlos a un jquery en el que quiero hacer una función para cada pulsar botón...

No sé si me he explicado (creo que no) pero soy nuevo y me cuesta.

Gracias a todos de antemano.

Hola:

Primero que nada, debes darle una clase a cada botón:

<button class="button">Boton</button>

Luego, con jQuery debes hacer esto:

$('button.button').live('click', function(e) {
  e.preventDefault();
  // Aquí pones el código que se ejecutará.
});

.live() se utiliza cuando se cargan elementos asíncronos, o sea, después de que se ha cargado la página y se añaden elementos con Javascript.

Espero que te sirva, saludos.

skaparate escribió:Hola:

Primero que nada, debes darle una clase a cada botón:

<button class="button">Boton</button>

Luego, con jQuery debes hacer esto:

$('button.button').live('click', function(e) {
  e.preventDefault();
  // Aquí pones el código que se ejecutará.
});

.live() se utiliza cuando se cargan elementos asíncronos, o sea, después de que se ha cargado la página y se añaden elementos con Javascript.

Espero que te sirva, saludos.

Muchas gracias por tu respuesta!
Pero no sé si yo podré hacer eso.
Mis botones se van creando uno a uno en un bucle en función de los valores que me devuelva una query de sql desde php

$sql=mysql_query("SELECT groupID FROM SIGNUP WHERE loginUser='$login'",$con);
...
<div id="chatTopBar" class="rounded"></div>
        <?php
            while($row = mysql_fetch_array($sql)){
	           echo "<button value=\"".$row['groupID']."\">".$row['groupID']."</option> \n";
            }
        ?>

entonces respecto al código que me has puesto, cómo puede jquery saber qué botón de todos he pulsado, si los botones dependen de lo que devuelva la query?¿

Muchas gracias por tu atención.
Saludos y perdona la molestia.

Javascript lo sabrá porque todos los botones (los elementos en general) tienen asociados ID internos.

Ahora, si tu pregunta es como puedo saber yo que botón se ha pulsado, entonces tendrás que darle un identificador, ya sea una clase (class), un atributo (si fuera un <a> , por ejemplo, podría ser el atributo href), un nombre (name). Supongamos que la consulta SQL devuelve estos botones:

<button value='a1'>A1</button>
<button value='a2'>A2</button>
<button value='a3'>A3</button>

Entonces con jQuery podrías hacer esto:

$(button').live('click', function(e) {
  e.preventDefault();
  // Aquí pones el código que se ejecutará.
  var valor = $(this).attr('value');

  switch(valor) {
    case 'a1':
      // Haces algo para A1
      break;
    case 'a2':
      // Haces algo para A2
      break;
    case 'a3':
      // Haces algo para A3
      break;
    // Etcétera
  }
});

Entiendes? :)

skaparate escribió:Javascript lo sabrá porque todos los botones (los elementos en general) tienen asociados ID internos.

Ahora, si tu pregunta es como puedo saber yo que botón se ha pulsado, entonces tendrás que darle un identificador, ya sea una clase (class), un atributo (si fuera un <a> , por ejemplo, podría ser el atributo href), un nombre (name). Supongamos que la consulta SQL devuelve estos botones:

<button value='a1'>A1</button>
<button value='a2'>A2</button>
<button value='a3'>A3</button>

Entonces con jQuery podrías hacer esto:

$(button').live('click', function(e) {
  e.preventDefault();
  // Aquí pones el código que se ejecutará.
  var valor = $(this).attr('value');

  switch(valor) {
    case 'a1':
      // Haces algo para A1
      break;
    case 'a2':
      // Haces algo para A2
      break;
    case 'a3':
      // Haces algo para A3
      break;
    // Etcétera
  }
});

Entiendes? :)

Entiendo. entonces sólo me queda una pregunta, tras el pulsar cualquier botón (cada uno tiene el value=nombre devuelto por sql), quiero hacer otra query de sql poniendo como campo el valor del botón.
La pregunta entonces es, qué forma tengo de saber el valor del botón pulsado?. Podría hacerse con tu línea de antes?

  var valor = $(this).attr('value'); 

y entonces con esa variable ya tendría el valor del botón pulsado para poder usarlo en mi 2ª query?

Muchas gracias por tu tiempo ;)

Entiendo. entonces sólo me queda una pregunta, tras el pulsar cualquier botón (cada uno tiene el value=nombre devuelto por sql), quiero hacer otra query de sql poniendo como campo el valor del botón.
La pregunta entonces es, qué forma tengo de saber el valor del botón pulsado?. Podría hacerse con tu línea de antes?
y entonces con esa variable ya tendría el valor del botón pulsado para poder usarlo en mi 2ª query?

Muchas gracias por tu tiempo ;)

Exacto :).

skaparate escribió:Exacto :).

Muchas gracias, me sirvió de mucha ayuda ;)