change
当我使用按钮更改事件值时,我试图在文本框上触发事件,但是它不起作用。检查这个小提琴。
如果在文本框中键入内容,然后单击其他位置,change
则会触发。但是,如果单击该按钮,则文本框的值将更改,但change
不会触发。为什么?
change
当我使用按钮更改事件值时,我试图在文本框上触发事件,但是它不起作用。检查这个小提琴。
如果在文本框中键入内容,然后单击其他位置,change
则会触发。但是,如果单击该按钮,则文本框的值将更改,但change
不会触发。为什么?
Answers:
onchange
仅在用户键入输入时触发,然后输入失去焦点。
onchange
设置值后,您可以使用手动调用事件:
$("#mytext").change(); // someObject.onchange(); in standard JS
或者,您可以使用以下方法触发事件:
$("#mytext").trigger("change");
.change()
到.val()
方法的选项。
.val()
进来.change()
。触发.change()
上.val()
会导致无限循环。
blur
不得不完成类似的任务:$('#mytext').focus().val('New text').blur();
您可以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)
调用when时触发。)
如果您只想在值实际更改时触发更改,请使用以下命令:
//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/
.val()
。
.val()
都会突然开始产生副作用:-p。
不,您可能需要在设置值后手动触发它:
$('#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')
仅在其更改时才调用的原因。
从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">
从https://api.jquery.com/change/:
当change
事件的值更改时,该事件将发送到该元素。此事件仅限于<input>
元素,<textarea>
框和<select>
元素。对于选择框,复选框和单选按钮,当用户使用鼠标进行选择时会立即触发该事件,但是对于其他元素类型,该事件将推迟到该元素失去焦点之前。