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

当我用按钮更改文本框的值时，我试图触发文本框上的更改事件，但它不起作用。检查

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

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

设置值后，可以使用手动调用onchange事件：

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

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

或者，您也可以使用以下方法启动事件：

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

---

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

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

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

或：

---

看起来这些事件并没有发生。试试这个：

$("#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（仅当它发生更改时）

从redsquare的优秀建议来看，这非常有效：

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

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

---

通过使用原始val函数的代理替换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);

一个有效的例子：

请注意，在调用valnew_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);

现场示例：

来自：

---

当元素的值更改时，将更改事件发送到元素。此事件仅限于元素、框和元素。对于选择框、复选框和单选按钮，当用户用鼠标进行选择时会立即触发事件，但对于其他元素类型，事件会延迟到元素失去焦点为止。

您需要像这样链接方法：

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

截至2019年2月。addEventListener目前不适用于jQuery.trigger或.change，您可以在下面使用Chrome或Firefox对其进行测试

txt.addEventListener'input'，函数{ console.log“未调用”； } $'txt'.val'test'.trigger'input'； $'txt'。触发'input'； $'txt'。更改；

---

我知道这是一个老线程，但对于其他人来说，上面的解决方案可能不如下面的好，与其检查更改事件，不如检查输入事件

---

您可以随意扩展jquery并添加一个say valWithChange函数，它将实现您想要的功能。它不能是默认操作，因为很多时候您不希望事件从自动值更改触发，只有当用户与元素交互时，我希望看到此答案被编辑以解决链接选项。更改为.val方法。原因可能是有些人调用.val in.change，因为他们进行输入验证。触发.val上的.change将导致无限循环。只有当他们将值更改为无法通过自身验证的值时，这才是愚蠢的。我最终绑定到blur以完成类似的操作：$'mytext'.focus.val'New text'.blur；令人惊讶的是，这并没有获得更多的投票，因为这是当前HTML元素更改的有效实现。例如，给这样一个函数起一个不同于.val的名称可能更好。但是，所有使用.val的正确定义编写的代码都会突然产生副作用：-p。这也会使插件发生故障，为了避免副作用，这可能不太容易修复，如上所述，我修改了val函数，但触发了一个不同的事件val，它允许我保留现有代码，但在需要时可以轻松处理：$..在“更改val”上，…如果您无法控制代码调用，这是一个很好的解决方案。val类似于使用外部库。如果你触发了一个自定义事件，它不会造成任何伤害。标题本身回答了我的问题。黄色注释确认：使用JavaScript（例如使用.val）更改输入元素的值不会触发事件。希望我能早点遇到，希望能有所帮助。