CODEWITHSUNDEEP
javascriptjquery
user979331
user979331

Reputation: 11871

Radio click event not working with checkboxes with same class name

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>');
    }
  });

Upvotes: 2

Views: 62

Answers (2)

zer00ne
zer00ne

Reputation: 43910

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 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>

Upvotes: 1

ORION TYO
ORION TYO

Reputation: 11

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>');
    }
  });

Upvotes: 0

Related Questions