Question

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

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

Answer 1

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

您可以在设置值后手动调用onchange事件：

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

或者，您可以使用以下方式trigger举办活动：

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

Answer 2

从redsquare的优秀建议中，这很好用：

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

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

Answer 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);

一个工作示例：here

（请注意，即使值未实际更改，调用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/

Answer 4

你需要像这样链接方法：

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

Answer 5

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

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

或：

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

Answer 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')更改时调用它。

Answer 7

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

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

Answer 8

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

Answer 9

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

$("#myInput").on("input", function() {
    // Print entered value in a div box
    $("#result").text($(this).val());
});

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

9 个答案: