Hola comunidad de stackoverflow
Estoy tratando de trabajar con el evento de cambio de botones de radio que se crean dinámicamente a partir de una llamada ajax. Estas radios se crean en función de un resultado de MySQL y cada botón de radio debe escuchar un evento onChange.
Aquí está mi llamada ajax:
$.ajax({ ... success:function(ajax_result){ ajax_result.forEach(fn_Populate); // could be replaced with for loop function fn_Populate(element){ $("xdiv").append("<input type='radio' id='radio_"+element[0]+"' name='xradio'>"); $("xdiv").append("<label for='radio_"+element[0]+"'>"+element[0]+"</label>"); } } });Esto debería crear los botones de radio de acuerdo con el resultado de ajax, por ejemplo, radio_1, radio_2, radio_3, todos con el nombre xradio .
Después de crear los botones de radio, necesito identificar cuándo se hace clic en un botón. Aquí está el código en jquery:
$("input[type=radio][name=xradio]").change(function(){ alert("DO SOMETHING"); // rest of code });El problema es que el evento de cambio no se dispara si está fuera de la llamada ajax.
Necesito dispararlo fuera de la llamada ajax porque generará otro botón dinámico a través de una nueva llamada ajax.
Toda ayuda será apreciada.
Gracias
Considera lo siguiente.
$("#xdiv").on("change", "input[name=xradio]", function(event){ console.log("Change on " + $(this).attr("id")); });Esto usa la delegación para vincular la devolución de llamada del evento a un elemento estático que es el padre del elemento dinámico. La delegación permite que sea activada por el elemento hijo.
Ver más: https://api.jquery.com/on/