Radio click event not working with checkboxes with same class name-CodePudding

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 >
<div >
              <div >
                <input type="radio"  name="anotherCheese" value="yes" />
                <label>Yes</label>
              </div>
              <div >
                <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 > <div > <input type="radio"  name="anotherCheese" value="yes"/> <label>Yes</label> </div><div > <input type="radio" name="anotherCheese" value="no"/> <label>No</label> </div></div>');
    }
  });

CodePudding user response：

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>
"click" event is now "change" event.
Note the second parameter is: ".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 >
      <fieldset >
        <input type="radio"  name="anotherCheese" value="yes" />
        <label>Yes</label><br>
        <input type="radio" name="anotherCheese" value="no" />
        <label>No</label>
      </fieldset>
    </fieldset>`);
  }
});

<body>
  <form >
    <fieldset >
      <fieldset >
        <input type="radio"  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>

CodePudding user response：

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 > 
<div > <input type="radio" 
 name="anotherCheese" value="yes"/> 
<label>Yes</label> </div><div > <input 
type="radio" name="anotherCheese" value="no"/> 
<label>No</label> </div></div>');
    }
  });