Tengo una casilla de verificación así con el nombre de clase anotherCheese , cuando alguien hace clic en eso, se agregará a la clase de pasos-fila-primero, lo que se agrega también tiene un botón de opción con el nombre de clase anotherCheese , pero mi evento de clic no recibe una llamada en el nuevo botón de radio con el nombre de clase anotherCheese , ¿qué estoy haciendo mal?
Aquí está el HTML
<div class="steps-row-first"> <div class="radio-wrapper"> <div class="radio-group"> <input type="radio" class="anotherCheese" name="anotherCheese" value="yes" /> <label>Yes</label> </div> <div class="radio-group"> <input type="radio" name="anotherCheese" value="no" /> <label>No</label> </div> </div> </div>Y el jQuery:
$('.anotherCheese').on("click", function(){ if($(this).val() == 'yes') { $(".steps-row-first").append('<div class="radio-wrapper"> <div class="radio-group"> <input type="radio" class="anotherCheese" name="anotherCheese" value="yes"/> <label>Yes</label> </div><div class="radio-group"> <input type="radio" name="anotherCheese" value="no"/> <label>No</label> </div></div>'); } });Vincule el evento a un elemento antecesor como .step-row-first . Hay algunos cambios en el ejemplo a continuación, pero en esencia, al vincular a un elemento principal, puede aprovechar la difusión de eventos y controlar todo el comportamiento de los elementos secundarios; esto se denomina delegación de eventos .
En el siguiente ejemplo:
.step-row-first es un <form>".anotherCheese" , que lo designa como this .<div> cambió a <fieldset> para la semántica . Por cierto, dado que no está usando ningún #id s (buena opción), podría usar .clone() , solo tiene que tener el clon desmarcado antes de agregarlo.
$(".steps-row-first").on("change", ".anotherCheese", function() { if ($(this).val() == 'yes') { $(".steps-row-first").append(` <fieldset class="radio-wrapper"> <fieldset class="radio-group"> <input type="radio" class="anotherCheese" name="anotherCheese" value="yes" /> <label>Yes</label><br> <input type="radio" name="anotherCheese" value="no" /> <label>No</label> </fieldset> </fieldset>`); } }); <body> <form class="steps-row-first"> <fieldset class="radio-wrapper"> <fieldset class="radio-group"> <input type="radio" class="anotherCheese" name="anotherCheese" value="yes" /> <label>Yes</label><br> <input type="radio" name="anotherCheese" value="no" /> <label>No</label> </fieldset> </fieldset> </form> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> /* Make sure that all of the <script> tags are right before the closing </body> tag */ </script> </body>no comenzaste con un ' comenzaste con un ' en el código fijo de jquery
$('.anotherCheese').on("click", function(){ if($(this).val() == 'yes') { $(".steps-row-first").append('<div class="radio-wrapper"> <div class="radio-group"> <input type="radio" class="anotherCheese" name="anotherCheese" value="yes"/> <label>Yes</label> </div><div class="radio-group"> <input type="radio" name="anotherCheese" value="no"/> <label>No</label> </div></div>'); } });