Не удается привязать динамически сгенерированное входное радио при нажатии

Question

Я пытаюсь сделать раскрывающийся список на основе некоторых динамически генерируемых радиовходов, которыми я не могу управлять.У меня это работает в коде, но эти радиовходы не генерируются динамически.Я чувствую, что я близок, но может иметь некоторые проблемы с синтаксисом.Есть предложения?

jQuery:

      (function () {
          return $('.cart-dropdown-select').each(function (idx, el) {
            var $select, $trigger, $radio;
            $select = $(el);
            $trigger = $select.find('.trigger');
            $radio = $select.find(".radio");
            $select.removeClass("is-open");
            $select.on("click", function (e) {
              return $select.toggleClass("is-open");
            });
            $select.on("click", "input[name='radio']", function (e) {
              console.log($(this));
              $select.removeClass("no-selection");
              return $select.toggleClass("is-open");
              $(this).parent().addClass("checked");
            });
          });

      }).call(this);

SCSS:

.cart-dropdown-select {
  position: relative;
  display: inline-block;
  padding: 6px 24px 6px 6px;
  box-shadow: 0 0 0 1px #000;
  border-radius: 4px;

  &.no-selection {
    label:first-of-type {
      display: block;
      height: auto;
    }
    .radio:first-of-type {
      display: block;
    }
  }

  .radio, .enabled{
    display: none;
  }

  &.is-open {
    input + label {
      margin-top: 3px;
      &:first-of-type {
        margin-top: 0;
      }
      &::after {
        content: "\A";  // hack to force linebreak
        white-space: pre;
      }
    }
    .radio, .enabled{
      display: block;
    }
  }


  &.is-open input,
  &.is-open input + label,
  input:checked,
  input:checked + label, .checked{
    display: block;
    height: auto;
  }

  input,
  input + label {
    display: block;
    height: 0;
    overflow: hidden;
  }

  &::after {
    position: absolute;
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border: 6px solid #fff;
    border-top-color: blue;
    top: 11px;
    right: 6px;
    cursor: pointer;
    font-size: 9px;
    box-sizing: border-box;
  }

  input[type="radio"] {
    display: none;
    opacity: 0;
    width: 0;
    height: 0;

    + label {
      position: relative;
      color: blue;
      &:hover {
        color: grey;
        cursor: pointer;
      }
    }

    &:disabled {
      + label {
        color: blue;
        padding-left: 0;
        &::before {
          display: none;
        }
      }
    }

    &:checked {
      + label {
        color: grey;
        &::before {
          background: $pop;
        }
      }
    }
  }
}

HTML (пример макета):

<div class='cart-dropdown-select is-open no-selection'>
     <div class="radio">
      <input disabled='disabled' id='disabled' name='radios' type='radio' value='disabled'>
      <label for='disabled'>Select Option</label>
  </div>

      <div class="radio">
        <input id='foo1' name='radios' type='radio' value='foo1'>
        <label for='foo1'>Foo1</label>
      </div>

      <div class="radio">
        <input id='foo2' name='radios' type='radio' value='foo2'>
        <label for='foo2'>Foo2</label>
      </div>

      <div class="radio">
        <input id='foo3' name='radios' type='radio' value='foo3'>
        <label for='foo3'>Foo3</label>
      </div>
    </div>

Также ссылка наКодовая ручка, опять же, этот контент в кодовой ручке не управляется динамически, поэтому он работает там нормально.https://codepen.io/ascarb1/pen/LKdKjE

Answer 1

Я закончил тем, что немного изменил HTML, чтобы связывание могло происходить внутри класса, который не загружается динамически. Кажется, это сработало. Не стесняйтесь оставлять отзывы, если есть еще лучшее решение:

JQuery:

      (function () {
          return $('.cart-dropdown-select').each(function (idx, el) {
            var $select, $trigger, $radio;
            $select = $(el);
            $trigger = $select.find('.trigger');
            $radio = $(".radio");
            $select.removeClass("is-open");
            $select.on("click", function (e) {
              return $select.toggleClass("is-open");
            });
            $select.on("click", ".enabled input", function() {
              $select.toggleClass("no-selection");
              $(this).parentsUntil($radio).toggleClass("checked");
              return $select.toggleClass("is-open");
            });
          });

      }).call(this);

HTML (пример):

<div class='cart-dropdown-select is-open no-selection'>
      <input disabled='disabled' id='disabled' name='radios' type='radio' value='disabled'>
      <label for='disabled'>Select Option</label>

      <div class="radio">
        <label class="enabled" for='foo1'>
          <input id='foo1' name='radios' type='radio' value='foo1'>
        Foo1</label>
      </div>

      <div class="radio">
        <label class="enabled" for='foo2'>
          <input id='foo2' name='radios' type='radio' value='foo2'>
        Foo2</label>
      </div>

      <div class="radio">
        <label class="enabled" for='foo3'>
          <input id='foo3' name='radios' type='radio' value='foo3'>
        Foo3</label>
      </div>
    </div>

SCSS не изменился.