val（）不会在jQuery中触发change（）[重复]

我试图通过按钮更改其值时在文本框中触发change事件，但是它不起作用。选中此小提琴。

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

标题本身回答了我的问题。在.change（）黄色处确认。“注意：例如，使用JavaScript更改输入元素的值，例如使用.val（）不会触发该事件。”

希望我会遇到stackoverflow.com/questions/11873721/…尽快，希望对您有所帮助。

#1 楼

onchange仅在用户键入输入内容时触发，然后输入内容失去焦点。 >
或者，您也可以使用以下方式触发事件：

$("#mytext").change(); // someObject.onchange(); in standard JS

随时扩展jquery并添加一个说valWithChange函数，它将执行您想要的操作。它不能是默认操作，因为您不希望仅当用户与元素交互时，才希望事件不会从自动值更改中触发

–红场
2010年7月5日，12：57

我想看到编辑此答案以解决将.change（）链接到.val（）方法的选项。

–？Snekse
2012年6月13日18:39

原因可能是某些人在.change（）中调用.val（），因为他们会进行输入验证。在.val（）上触发.change（）将导致无限循环。

– ying
2012年9月2日在4:01

仅当他们将值更改为无法通过自己的验证的情况时，这才是愚蠢的。

–冷
2013年6月5日17:21

我最终绑定到模糊对象以完成类似的操作：$（'＃mytext'）。focus（）。val（'New text'）。blur（）;

– Wes Johnson
2014年7月24日15:31

#2 楼

根据redsquare的出色建议，它可以很好地工作：

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

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

#3 楼

您可以很轻松地覆盖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);

一个工作示例：此处

（请注意，即使值未实际更改，当调用change时，它始终会触发val(new_val)。）

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

//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 /

嗯，不必要的鸭子打补丁，我想:-p。如redsquare所言，最好给该函数一个不同于.val（）的名称。

– Binki
14年6月16日在20:09

如果重命名，则应更改现有代码-这样，您的现有代码将继续起作用

– Yaron U.
14年6月16日在20:16

但是随后所有记入.val（）正确定义的代码都会突然开始产生副作用:-p。

– Binki
2014年6月16日20:19在

这也会使插件发生故障，可能无法轻松修复

–那又怎样
2015年10月17日，11：31

为了避免产生副作用，我如上所述修改了val函数，但是我触发了一个不同的事件（“ val”），这使我可以保留现有代码，但可以在需要时轻松地处理它：）.on（'change val'，...）

–ulu
16年4月4日在9:24

#4 楼

您需要像这样链接方法：

$('#input').val('test').change();

#5 楼

不，您可能不需要在设置值后手动触发它：

$('#mytext').change();

或：

$('#mytext').trigger('change');

#6 楼

看来事件并没有冒泡。试试这个：

$("#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')的原因。

令人惊讶的是，由于没有投票，因为这是HTML元素更改的当前有效实现。

–vol7ron
14年4月23日在20:39

#7 楼

从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">

#8 楼

从https://api.jquery.com/change/：

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

#9 楼

我知道这是一个旧线程，但是对于其他人来说，上述解决方案可能不如以下解决方案好，而不是检查change事件，而不是检查input事件。

编程黑洞网