I have a checkbox like so with the class name anotherCheese, When someone clicks on that it will append to the steps-row-first class, what is being appended also has a radio button with the class name anotherCheese, but my click event does not get called on the new radio button with the class name anotherCheese, what am I doing wrong?
Here is the 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>
And the 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>');
}
});
Bind the event to an ancestor element like .step-row-first. There's some changes to the example below, but in essence, by binding to an ancestor element, you can leverage event bubbling and control all behavior of children elements -- this is called event delegation.
In the following example:
.step-row-first is a <form>".anotherCheese", which designates it as this.<div> changed to <fieldset> for semantics.BTW, since you're not using any #ids (good choice), you could use .clone() you just got to have the clone unchecked before appending it.
$(".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>you didn't start with a ' you started with a ‘ in jquery fixed code
$('.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>');
}
});