Question

希望认为这个问题是正确的。所以，我有一些无线电，我的CMS加载作为产品选项。在同一页面上，我有一个AJAX过滤器，它可以将完全相同的无线电加载到那个确切的位置。

麻烦的是，我无法使用这种动态创建的无线电来改变总价格，但以前的无线电可以正常工作。运行代码段以获得最佳理解。

＆＃13;

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

＆＃13;

<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>

＆＃13;

编辑1。该内容不被视为异步ajax或on，因为它实际上会添加，但只是没有＆＃39 ; t在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);
})

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

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

2 个答案: