jquery - 在更改时附加输入表单返回默认值

Question

我有一个单选框，在更改时会附加一个输入字段。但是即使在附加的输入框中输入内容，输入值也始终保持为 1000。请帮忙，过去两个小时我一直在努力解决这个问题。

$('.input-amount').change(function () {
            if ($(this).val() === "others") {
                var htmlInput = `<input type="number" class="form-control number-as" value="1000">`;
                $('.value-amount span').text('');
                $('.value-amount span').append(htmlInput);
            }

  });

在下面的按钮单击上，我想加载在输入字段中键入的数字，但它总是加载默认的 1000

  $('#srppaymenetbutton1').on('click', function(){

    $(this).append('<div class="loader">Loading...</div>');
    var amount = $('.input-amount:checked').val();
    if (amount === "others") {
        amount = $(document).find('.number-as').val();
    }

    alert(amount);
   .........

标签： jqueryforms

Answer 1

使用全局范围变量来存储最新插入的值。这里我使用了 input_amount

var input_amount = 1000
$('.input-amount').change(function() {
  if ($(this).val() === "others") {
    $('.value-amount span').html(`<input type="number" class="form-control number-as" value="${input_amount}">`);
    listenValueChange();
  }
});

function listenValueChange() {
  $(".number-as").change(function() {
    input_amount = $(this).val()
  })
}

$('#srppaymenetbutton1').on('click', function() {
  //$(this).append('<div class="loader">Loading...</div>');
  var amount = $('.input-amount:checked').val();
  if (amount === "others") {
    amount = $(document).find('.number-as').val();
  }

  console.log(amount);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
  <input type="radio" class="input-amount" name="amt" value="foo">foo
</label>
<label>
  <input type="radio" class="input-amount" name="amt" value="bar">bar
</label>
<label>
  <input type="radio" class="input-amount" name="amt" value="others">others
</label>

<div class="value-amount">
  <span></span>
</div>

<button id="srppaymenetbutton1">Payment</button>