为什么jQuery无法在事件中更新输入值？

Question

我在jQuery中创建事件输入。当我单击按钮更改输入值时，它不会更改。当我从值中获取console.log（）时，它将返回新值，但不会更改视图中的值。这是我的代码：

$('document').ready(function() {
  $('.add_button').on('click', function(e) {
    e.preventDefault();
    $('.teswt_div').html('<a type="button" class="increase-input-test onclick="changeInput()">change</a>' +
      '<input id="test_input" type="number" min="1" max="3" value="1" step="1">');
  })
})

function changeInput() {
  const lastValue = parseInt($('#test_input').val());
  $('#test_input').val(2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

也没有改变：

 $('#test_input').attr('value', 2); 
 document.getElemntById('test_input').value = 2;

Answer 1

您如何尝试更改值？就是这样

$('document').ready(function(){
    $('.add_button').on('click', function (e) {
         e.preventDefault();
     $('.teswt_div').html('<a type="button" class="increase-input-test onclick="changeInput()">change</a>' +
     '<input id="test_input" type="number" min="1" max="3" value="1" step="1">');
    })
}) 


function changeInput() {
    const lastValue = parseInt($('#test_input').val());
    $('#test_input').val(2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="add_button">add</button>
<div class="teswt_div"></div>

<button onclick="changeInput()">Change</button>