提问者:小点点

为什么jQuery不能更新事件中的输入值?


我在jQuery中创建了一个事件输入。 当我在单击按钮时更改输入值时,它不会改变。 当我从value中获取console.log()时,它返回新值,但不会更改视图中的值。 下面是我的代码:

null

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

function changeInput() {
  $('#test_input').val(2);
}
.add_button, .test_div {
  color: black
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
    <button class="add_button">click</button>
    <br>
    <div class="test_div"></div>
  </body>
</html>

null

它也没有改变:

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

共3个答案

匿名用户

你试图如何改变值? 只是管用。 您确定只有一个ID为test_input的元素吗? 这是一个非常常见的错误,请记住,在HTML页面中,您不应该有两个具有相同id的元素。

null

$('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>

匿名用户

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

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

这个管用。 在添加html时,尝试通过Jquery添加点击侦听器

与钢笔的链接

匿名用户

主要问题是您刚刚错过了onclick之前一个class属性的双引号(“)的结尾。

如果有多个。。

null

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


function changeInput(thisVar) { 
    var $testInput = $(thisVar).next('.test_input');
    const lastValue = parseInt($testInput.val()); alert($testInput.val());
    $testInput.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>