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

【问题标题】：Unable to add (+=) a number to var with dynamically generated radio无法使用动态生成的无线电向 var 添加 (+=) 数字
【发布时间】：2017-01-27 16:21:18
【问题描述】：

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

问题是，我无法使用这种动态创建的收音机更改总价，但以前的收音机效果很好。运行 sn-p 以获得最佳理解。

$('#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，因为它实际上做了添加，但只是没有在@上显示它987654326@。我在搞事情。

【问题讨论】：

How do I return the response from an asynchronous call?的可能重复
.on() 是异步的，仅供参考
这个问题已经被问了几十次了。您必须委托事件处理程序。您的事件不适用于动态添加的 DOM 元素。它在 jQuery 文档中。
绑定时输入不存在，所以不是绑定。
我认为委托已经应用了。不是吗？ =)

标签： jquery onchange onkeyup jquery-events

【解决方案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>

【讨论】：

如果你要这样做，你也可以一直压缩它 $("form").bind("change keyup", "input", function(e) { $(".total").html(299 + (e.target.value * 100))});
感谢您的回复。以您提供的形式工作，但我的代码是一个简单的示例。实际脚本很复杂，所以我不能使用switch。
@AzamatSafarov 这个jsfiddle.net/2k68fote 怎么样，假设你的值字段有意义。
@AndrewBone，不。此收音机是产品选项。它们的价格从 1 美元到 1000 美元不等。我也无法使用此解决方案，因为该产品还有许多其他选项（复选框、输入），对于这些功能，price var 应位于form keyup 之外。

【解决方案2】：

不出所料，我搞砸了事件。因此，解决方案是不对现有change keyup 中动态添加的无线电使用新事件，并将这些事件委托给新的 crated 无线电。

$("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);
})

详情见小提琴：https://jsfiddle.net/shnn032o/8/

【讨论】：