Question

我尝试在文本输入值更改时创建一个函数，如果我通过手动输入更改值，则函数正常工作，但如果值是自动更改，则函数没有用其他元素上的事件发生例如 - 如果尝试使用按钮或范围更改值，则文本输入的值会更改，但文本输入的功能不起作用
但我希望在以任何方式改变文本输入的值时运行该功能

这是我试过的代码
HTML

<button id="mybutton">set value to 15</button><br>
<input type="range" min="5" max="15" value="5" id="myrange" step="1" ><br>
<input id="my-input" type="text">

jquery的

$('#my-input').on('keyup change', function() {
          console.log(this.value);
         });
$('#myrange').change(function(){
$('#my-input').val(this.value);
   });
$('#mybutton').click(function(){
$('#my-input').val(15);
   });

Jsfiddle

提前感谢您的帮助

Answer 1

您需要更改范围的值并调用范围的变更处理程序而不是输入类型文本

<强> Live Demo

$('#mybutton').click(function () {
     $('#myrange').val(15).change();
});

$('#myrange').change(function () {
    $('#my-input').val(this.value).change();
});

Answer 2

您必须手动触发change事件，如下所示：

...
$('#my-input').val(this.value).trigger("change"); 
....

和

....
$('#my-input').val(15).trigger("change");
....

整个工作代码：

$(document).ready(function(){
$('#my-input').on('keyup change', function() {
          console.log(this.value);
         });

$('#myrange').change(function(){
$('#my-input').val(this.value).trigger("change");
   });

$('#mybutton').click(function(){
$('#my-input').val(15).trigger("change");
   });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="mybutton">set value to 15</button><br>
<input type="range" min="5" max="15" value="5" id="myrange" step="1" ><br>
<input id="my-input" type="text">

Answer 3

另一个更改效果将不适用于文本框，您必须在第一个元素更改时手动调用该函数 HTML

<input type="range" min="5" max="15" value="5" id="myrange" step="1" onchange='change(this.val);'><br>

脚本

function change(val){
console.log(val);
}

并调用

$('#mybutton').click(function(){
$('#my-input').val(15);
change(15);
});

jQuery：如何以任何方式更改文本输入的值时创建函数

3 个答案: