tabs do not work when a new element is added through append

Question

i have a few tab with radio button , and this tab can add by user in page everything is work but when new tab add by append in jquery this tab not work .

https://jsfiddle.net/asy2conq/

name="nationality44" is example, im understand this name was changed for other tabs

Answer 1

Your code doesn't work because next radio button which you will append are dynamically generated .Instead , you can use $(document).on("change",".cc input[type=radio]", function().. this will get called when radio is change and then use $(this).closest(".passengers-info-box") to find your usa and nousa div and hide/show them respectively .

Demo Code :

//onchange of radio
$(document).on("change", ".cc input[type=radio]", function() {
  var selector = $(this).closest(".passengers-info-box");
  if ($(this).val() == 'usa') {
    //get closest form find divs 
    selector.find('.usa').show();
    selector.find('.nousa').hide();
  } else if ($(this).val() == 'non-usa') {
    //get closest form find divs
    selector.find('.nousa').show();
    selector.find('.usa').hide();
  }
});
$('.aaa').click(function() {

  $('.cc').append('\n' +
    '<form class="passengers-info-box">\n' +
    '    <div id="passengers-2225" class="numDiv">\n' +
    '        <div class="passenger-remove-btn">\n' +
    '\n' +
    '            <i class="fas fa-times"></i>\n' +
    '\n' +
    '        </div>\n' +
    '        <div class="passenger-box">\n' +
    '            \n' +
    '\n' +
    '            <div class="passenger-input-wrapper">\n' +
    '\n' +
    '                <div class="nationality_checkbox">\n' +
    '\n' +
    '                    <ul>\n' +
    '\n' +
    '                        <li>\n' +
    '                            <div class="Nationalityradio">\n' +
    '                                <input value="usa" type="radio" name="nationality44" id="usaradio-044"\n' +
    '                                       class="radio__input" checked>\n' +
    '                                <label for="usaradio-044" class="radio__label"> usa</label>\n' +
    '                            </div>\n' +
    '                        </li>\n' +
    '                        <li>\n' +
    '                            <div class="Nationalityradio">\n' +
    '                                <input value="non-usa" type="radio" name="nationality44" id="non-usaradio-044"\n' +
    '                                       class="radio__input">\n' +
    '                                <label for="non-usaradio-044" class="radio__label">nousa</label>\n' +
    '                            </div>\n' +
    '                        </li>\n' +
    '                    </ul>\n' +
    '                </div>\n' +
    '\n' +
    '                <div class="passenger-form-area usa">\n' +
    '\n' +
    '              usa\n' +
    '\n' +
    '\n' +
    '                </div>\n' +
    '                <div style="display: none" class="passenger-form-area nousa">\n' +
    '\n' +
    '                  no usa\n' +
    '\n' +
    '\n' +
    '                </div>\n' +
    '\n' +
    '            </div>\n' +
    '\n' +
    '\n' +
    '        </div>\n' +
    '    </div>\n' +
    '\n' +
    '\n' +
    '</form>');


})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cc">

  <form class="passengers-info-box">
    <div id="passengers-1" class="numDiv">
      <div class="passenger-remove-btn">

        <i class="fas fa-times"></i>

      </div>
      <div class="passenger-box">


        <div class="passenger-input-wrapper">

          <div class="nationality_checkbox">

            <ul>

              <li>
                <div class="Nationalityradio">
                  <input value="usa" type="radio" name="nationality" id="usaradio-01" class="radio__input" checked>
                  <label for="usaradio-01" class="radio__label"> usa</label>
                </div>
              </li>
              <li>
                <div class="Nationalityradio">
                  <input value="non-usa" type="radio" name="nationality" id="non-usaradio-01" class="radio__input">
                  <label for="non-usaradio-01" class="radio__label">nousa</label>
                </div>
              </li>
            </ul>
          </div>

          <div class="passenger-form-area usa">

            usa


          </div>
          <div style="display: none" class="passenger-form-area nousa">

            no usa


          </div>

        </div>


      </div>
    </div>


  </form>

  <hr> from 2
  <hr>




  <form class="passengers-info-box">
    <div id="passengers-2" class="numDiv">
      <div class="passenger-remove-btn">

        <i class="fas fa-times"></i>

      </div>
      <div class="passenger-box">


        <div class="passenger-input-wrapper">

          <div class="nationality_checkbox">

            <ul>

              <li>
                <div class="Nationalityradio">
                  <input value="usa" type="radio" name="nationality01" id="usaradio-02" class="radio__input" checked>
                  <label for="usaradio-02" class="radio__label"> usa</label>
                </div>
              </li>
              <li>
                <div class="Nationalityradio">
                  <input value="non-usa" type="radio" name="nationality01" id="non-usaradio-02" class="radio__input">
                  <label for="non-usaradio-02" class="radio__label">nousa</label>
                </div>
              </li>
            </ul>
          </div>

          <div class="passenger-form-area usa">

            usa


          </div>
          <div style="display: none" class="passenger-form-area nousa">

            no usa


          </div>

        </div>


      </div>
    </div>


  </form>

</div>

<button class="aaa">append</button>