我在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;
你试图如何改变值? 只是管用。 您确定只有一个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>