單擊時無法綁定動態生成的輸入單選

Question

我正在嘗試基於一些我無法控制的動態生成的無線電輸入進行下拉。 我有它在Codepen中工作，但是這些無線電輸入不是動態生成的。 我覺得我已經接近了，但是可能有一些語法問題。 有什么建議么？

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不變。