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

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

如果你在文本框中输入内容并单击其他地方，change将被触发。但是，如果单击按钮，文本框的值会改变，但不会触发change。为什么?

304830 次浏览
小开
最佳答案

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

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

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

或者，你可以使用以下方法触发事件:

$("#mytext").val( 777 ).trigger("change");
小开

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

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

或者:

$('#mytext').trigger('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函数的代理。

在你的文档中添加这段代码(在加载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);

一个工作示例:在这里

(注意，当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/

小开

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

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

小开

你需要像这样链接这个方法:

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

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

小开

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

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

你可以使用attr和瓦尔方法，然后触发更改:

$('.parent-form').find('input').each(function() {
item = $(this);
item.attr('value', '0622-03-22');
item.val('01/01/01').trigger('change');
});

提交答案