val - select item change jquery

La función Jquery.change() no funciona con la lista SELECT rellenada dinámicamente

Question

Tengo un campo de selección que se llena dinámicamente con una llamada ajax que simplemente devuelve todas las opciones de selección de HTML. Aquí está la parte del PHP que simplemente hace eco de las etiquetas de selección y rellena dinámicamente 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 llenar esta lista, intento llamar a un evento de cambio, de modo que cada vez que se cambie la opción predeterminada en la lista SELECCIONAR o en un campo de texto con la misma clase, deshabilite un botón de radio configurado en otra parte del formulario . (Puede ver la pregunta inicial que solicité para que funcione esta parte de la funcionalidad here )

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

Por alguna razón, aunque le doy al campo de selección el nombre de clase apropiado (afecto), cuando selecciono diferentes opciones en el campo, las otras partes del formulario no se desactivan. El campo de texto estático con la misma clase funciona bien. Estoy perplejo.

¿Algunas ideas?

Answer 1

Acabo de comentar su última pregunta ... Esto es lo que dije:

Use jQuery bind

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

Llame addSelectChange en su función de éxito de Ajax. Debería hacer el truco. Eche un vistazo al evento en vivo de jQuery también (para cuando quiera establecer eventos para todos los elementos DOM actuales y futuros en un proyecto posterior o algo así). Lamentablemente, el evento de cambio y algunos otros aún no son compatibles con Live. Bind es la segunda mejor opción

Answer 2

Encontré como solución para hacer solo

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

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

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

En options_generator.php solo opciones de eco:

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

Answer 3

Para los elementos que se insertan dinámicamente en el DOM, sus eventos deben estar vinculados con

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

Esto se debe a que cuando ejecutas $(function(){}); y enlazar eventos usando $.click o $.change , etc., está vinculando eventos a elementos ya existentes en el DOM . Cualquier manipulación que haga después de eso no se verá afectada por lo que ocurra en $(function(){}); llamada. $.bind le dice a su página que busque los elementos futuros en su selector así como los actuales.

Answer 4

Un ejemplo usando .live ()

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

Answer 5

Use la función delegate () en su lugar. Más sobre eso aquí http://www.elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

Answer 6

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

From docs: vincula un controlador a un evento (como un clic) para todos los elementos coincidentes actuales y futuros. También puede enlazar eventos personalizados.

Answer 7

_{Una respuesta más actualizada.}

Dado que los elementos están dinámicamente poblados, está buscando la delegación de eventos .

Sin .live() no use .live() / .bind() / .delegate() . Deberías usar .on() .

De acuerdo con los documentos de jQuery API :

A partir de jQuery 1.7, el método .on() es el método preferido para adjuntar manejadores de eventos a un documento. Para versiones anteriores, el método .bind() se usa para asociar un controlador de eventos directamente a los elementos. Los manejadores se adjuntan a los elementos actualmente seleccionados en el objeto jQuery, por lo que esos elementos deben existir en el punto en que se .bind() la llamada a .bind() . Para una vinculación de eventos más flexible, consulte la discusión de la delegación de eventos en .on() .

Por lo tanto, usarías algo como esto:

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