无法使用动态生成的无线电向 var 添加 (+=) 数字

Question

Hope 猜对了这个问题。所以，我有一些收音机，我的 CMS 将其加载为产品选项。在同一页面上，我有一个 AJAX 过滤器，它可以将完全相同的收音机加载到那个确切的位置。

问题是，我无法更改这个动态创建的收音机的总价，但以前的收音机工作得很好。运行最好理解的片段。

$('#add').on('click', function() {
  if (!$('#price_3').length) {
    $('#multiply').before('<input type="radio" name="radios" id="price_3" value="3"> <label for="price_3">Generated by AJAX</label> <br><br>');
    $(this).remove();
  }
})

$("input").bind("change keyup", function() {
  var price = 100;

  if ($('#price_1').is(':checked')) {
    price += 100;
  };

  if ($('#price_2').is(':checked')) {
    price += 200;
  };

  if ($('#price_3').is(':checked')) {
    price += 300;
    $(".total").append("&nbsp;<- doesn't change the price");
    $(".info").html("<br><br> Actually adds +300, but not live");
  };

  if ($('#multiply').is(':checked')) {
    price *= 2;
  };

  $(".total").html(price);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
  <input type="radio" name="radios" id="price" value="0" checked>
  <label for="price">I'm a base</label>
  <br>
  <input type="radio" name="radios" id="price_1" value="1">
  <label for="price_1">Here by default</label>
  <br>
  <input type="radio" name="radios" id="price_2" value="2">
  <label for="price_2">Here by default 2</label>
  <br>
  <input type="checkbox" name="multiply" id="multiply" value="multiply">
  <label for="multiply">Multiply by 2</label>
  <br>
  <input type="button" id="add" value="Add a radio">
  <br>
  <span class="total">100</span>
  <span class="info"></span>
</form>

编辑 1. 这件事不被视为异步 ajax 或 on，因为它实际上确实添加，但不会在 change 上显示。我把事情搞砸了。

Answer 1

事件处理程序运行没有任何其他事件发生。所以价格永远不会被设定。委托事件处理程序并从中获取数据。

例如：

$('#add').on('click', function() {
    if(!$('#price_3').length) {
    $(this).before('<input type="radio" name="radios" id="price_3" value="3"> <label for="price_3">Generated by AJAX</label> <br><br>');
  }
})

$("form").bind("change keyup", "input", function (e) {
  var price = 299;

  switch (e.target.id) {
    case 'price_1':
      price += 100;
      break;
    case 'price_2':
      price += 200;
      break;
    case 'price_3':
      price += 300;
      break;
  };

  $(".total").html(price);
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
    <input type="radio" name="radios" id="price" value="0" checked> <label for="price">I'm a base</label> <br>
    <input type="radio" name="radios" id="price_1" value="1"> <label for="price_1">Here by default</label> <br>
    <input type="radio" name="radios" id="price_2" value="2"> <label for="price_2">Here by default 2</label> <br>
    <input type="button" id="add" value="Add a radio"> <br> <br>
    <span class="total">299</span>
    <span class="info"></span>
</form>

Answer 2

不出所料，我把事情搞砸了。因此，解决方案是不对现有 change keyup 中动态添加的收音机使用新事件，并将该事件委托给新的装箱收音机。

$("form").bind("change keyup", "#price_3", function() { // note, that I'm using very big form in the project, so I'm unable to delegate just to input
  var price = 100;

  if ($('#price_1').is(':checked')) {
    price += 100;
  };

  if ($('#price_2').is(':checked')) {
    price += 200;
  };

  if ($('#price_3').is(':checked')) {
    price += 300;
  };

  $(".total").html(price);
})

详情见fiddle：https://jsfiddle.net/shnn032o/8/

无法使用动态生成的无线电向 var 添加 (+=) 数字

Unable to add (+=) a number to var with dynamically generated radio

jquery

onchange

onkeyup

jquery-events