Jquery .Cambiar () no trabaja con la lista SELECT dinámicamente poblado

Question

Tengo un campo de selección que se rellena de forma dinámica con una llamada AJAX que simplemente devuelve todas las opciones seleccionadas HTML. Aquí está la parte del PHP que solo el eco de las etiquetas select y dinámica llena cada opción / valor.

echo "<select name='player1' class='affector'>";
echo "<option value='' selected>--".sizeof($start)." PLAYERS LOADED--</option>";

foreach ($start as $value) {
    echo "<option value='".$value."'>".$value."</option>";
 }  
  echo "</select>";
}  

Después de esta lista se llena, estoy tratando de llamar a un evento de cambio, por lo que cada vez que la opción por defecto se cambia en la lista SELECT o en un campo de texto con la misma clase, se desactiva un botón de opción establecido en otra parte de la forma. (Se puede ver la pregunta inicial pregunté para conseguir esta parte de la funcionalidad de trabajo aquí )

$('.affector').change(function(){
       $(this).parents('tr').find('input:radio').attr('disabled', false);
});

Por alguna razón, a pesar de que le doy el campo de selección del nombre de la clase apropiada (affector), cuando selecciono diferentes opciones en el campo, las otras partes de la forma no deshabilitan. El campo de texto estático con la misma clase funciona bien. Estoy perplejo.

¿Alguna idea?

Answer 1

Sólo ha comentado tu última pregunta ... Esto es lo que dijo:

Usar jQuery se unen

function addSelectChange() {
   $('select').bind('change', function() {
       // yada yada
   });
} 

Llamada addSelectChange en su función ajax éxito. Se debe hacer el truco. Echar un vistazo a jQuery evento en vivo también (para cuando se desea establecer eventos para todos los elementos DOM actuales y futuras en un proyecto posterior o algo así). Desafortunadamente el evento de cambio y algunos otros aún no son compatibles con vivo. Bind es la segunda mejor opción

Answer 2

_{A más hasta la fecha respuesta ..}

Dado que los elementos están pobladas de forma dinámica, que busca evento delegación .

No utilice .live() / .bind() / .delegate(), sin embargo. Debe utilizar .on() .

De acuerdo con la documentos de la API jQuery :

  

A partir de jQuery 1.7, la href="http://api.jquery.com/on/" rel="noreferrer"> .on() método es el método preferido .bind() método se utiliza para la fijación de un controlador de eventos directamente a los elementos. Los manipuladores están unidos a los elementos seleccionados actualmente en el objeto jQuery, por lo que deben existir esos elementos en el punto de la llamada a .bind() se produce. Para la unión caso más flexible, véase la discusión de delegación de eventos en .on() .

Por lo tanto se usaría algo como esto:

$(document).on('change', 'select', function (e) {
    /* ... */
});

Answer 3

Un ejemplo utilizando .live ()

$('#my_form_id select[name^="my_select_name"]').live('change', (function () {
    console.log( $("option:selected", this).val());
    })
 );

Answer 4

Para artículos que se insertan de forma dinámica en el DOM, sus eventos deben ser atados con

$('.selector').bind('change',function() { doWork() });

Esto se debe a que cuando se ejecuta $(function(){}); y enlazar eventos utilizando $.click o $.change, etc., que son eventos a elementos de enlace ya existente en el DOM . Cualquier manipulación que haces después de que no se vea afectado por lo que sucede en la llamada $(function(){});. $.bind le dice a su página para buscar elementos de futuro en su selector, así como los actuales.

Answer 5

tratar .live: http://docs.jquery.com/Events/live

A partir de documentos: Se une a un controlador de un evento (como clic) para todos los actuales - elemento emparejado - y el futuro. También puede enlazar eventos personalizados.

Answer 6

He encontrado como solución para hacer solamente

<select id="myselect"></select> 

en el archivo php / html y luego generar opciones para que por ajax:

$.post("options_generator.php", function (data) { $("#myselect").append(data); });

En options_generator.php opciones de eco solamente:

echo "<option value='1'>1</option>";
echo "<option value='2'>2</option>";

Answer 7

Función Uso delegado () en su lugar. Más sobre esto aquí http: // www.elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/