val()不会在jQuery中触发change()

Question

change当我用按钮更改其值时,我试图在文本框上触发事件,但它不起作用.检查这个小提琴.

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

Answer 1

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

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

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

或者,您可以使用以下命令触发事件:

$("#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);

一个工作的例子:这里

(请注意,即使值未实际更改,也会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

截至 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">