val（）不会在jQuery中触发change（）-Java 学习之路

302

当我用按钮更改其值时，我试图在文本框上触发 change 事件，但它不起作用 . 检查this fiddle .

如果在文本框中键入内容并单击其他位置，则会触发 change . 但是，如果单击该按钮，则会更改文本框值，但不会触发 change . 为什么？

8 回答

0
onchange 仅在用户键入输入时触发，然后输入失去焦点 .

您可以在设置值后手动调用 onchange 事件：
```
$("#mytext").change(); // someObject.onchange(); in standard JS
```
或者，你可以trigger事件使用：
```
$("#mytext").trigger("change");
```
回复于 2024-05-07T11:16:34+08:00

从redsquare的出色建议来看，这很好用：

$.fn.changeVal = function (v) {
    return this.val(v).trigger("change");
}

$("#my-input").changeVal("Tyrannosaurus Rex");

回复于 2024-05-07T11:16:34+08:00

您可以非常轻松地覆盖 val 函数，通过将其替换为原始 val 函数的代理来触发更改 .

只需在文档中的某处添加此代码（在加载jQuery之后）

(function($){
    var originalVal = $.fn.val;
    $.fn.val = function(){
        var result =originalVal.apply(this,arguments);
        if(arguments.length>0)
            $(this).change(); // OR with custom event $(this).trigger('value-changed');
        return result;
    };
})(jQuery);

一个工作示例：here

（请注意，即使值实际没有更改，当调用 val(new_val) 时，也会始终触发 change . ）

如果您只想在值实际更改时触发更改，请使用以下值：

//This will trigger "change" event when "val(new_val)" called 
//with value different than the current one
(function($){
    var originalVal = $.fn.val;
    $.fn.val = function(){
        var prev;
        if(arguments.length>0){
            prev = originalVal.apply(this,[]);
        }
        var result =originalVal.apply(this,arguments);
        if(arguments.length>0 && prev!=originalVal.apply(this,[]))
            $(this).change();  // OR with custom event $(this).trigger('value-changed')
        return result;
    };
})(jQuery);

实例：http://jsfiddle.net/5fSmx/1/

回复于 2024-05-07T11:16:34+08:00

393
你需要像这样链接方法：
```
$('#input').val('test').change();
```
回复于 2024-05-07T11:16:34+08:00
1
不需要在设置值后手动触发它：
```
$('#mytext').change();
```
要么：
```
$('#mytext').trigger('change');
```
回复于 2024-05-07T11:16:34+08:00
54
看起来这些事件并没有冒泡 . 试试这个：
```
$("#mybutton").click(function(){
  var oldval=$("#mytext").val();
  $("#mytext").val('Changed by button');
  var newval=$("#mytext").val();
  if (newval != oldval) {
    $("#mytext").trigger('change');
  }
});
```
我希望这有帮助 .

我尝试了一个简单的旧 $("#mytext").trigger('change') 而没有保存旧值，即使值没有改变， .change 也会触发 . 这就是为什么我保存了以前的值并且仅在它发生变化时才调用 $("#mytext").trigger('change') .
回复于 2024-05-07T11:16:34+08:00
14

来自https://api.jquery.com/change/：

change 事件在其值更改时发送到元素 . 此事件仅限于 <input> 个元素， <textarea> 个框和 <select> 个元素 . 对于选择框，复选框和单选按钮，当用户使用鼠标进行选择时会立即触发事件，但对于其他元素类型，事件将延迟，直到元素失去焦点 .

回复于 2024-05-07T11:16:34+08:00

截至2019年2月 .addEventListener() 目前无法使用jQuery .trigger() 或 .change() ，您可以使用Chrome或Firefox在下面进行测试 .

txt.addEventListener('input', function() {
  console.log('not called?');
})
$('#txt').val('test').trigger('input');
$('#txt').trigger('input');
$('#txt').change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt">

你必须使用.dispatchEvent() .

txt.addEventListener('input', function() {
  console.log('it works!');
})
$('#txt').val('yes')
txt.dispatchEvent(new Event('input'));

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

<input type="text" id="txt">

回复于 2024-05-07T11:16:34+08:00

val（）不会在jQuery中触发change（）

8 回答

相关问题