当我用按钮更改文本框的值时,我试图触发文本框上的更改事件,但它不起作用。检查这把小提琴。
如果在文本框中键入内容,然后单击其他地方,则会触发更改。但是,如果单击该按钮,文本框值将被更改,但不会触发更改。为什么?
当我用按钮更改文本框的值时,我试图触发文本框上的更改事件,但它不起作用。检查这把小提琴。
如果在文本框中键入内容,然后单击其他地方,则会触发更改。但是,如果单击该按钮,文本框值将被更改,但不会触发更改。为什么?
当前回答
您可以很容易地覆盖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)被调用时,即使值没有实际改变,这也总是会触发变化。)
如果你想在值实际改变时才触发更改,使用这个:
//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/
其他回答
从redsquare的出色建议来看,这非常有效:
$.fn.changeVal = function (v) {
return this.val(v).trigger("change");
}
$("#my-input").changeVal("Tyrannosaurus Rex");
看起来事态并没有发酵。试试这个:
$("#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')仅当它发生变化时。
从https://api.jquery.com/change/:
当元素的值发生变化时,change事件被发送到元素。此事件仅限于<input>元素,<textarea>框和<select>元素。对于选择框、复选框和单选按钮,当用户使用鼠标进行选择时,事件将立即触发,但对于其他元素类型,事件将延迟到元素失去焦点。
您可以很容易地覆盖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)被调用时,即使值没有实际改变,这也总是会触发变化。)
如果你想在值实际改变时才触发更改,使用这个:
//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/
Onchange只在用户输入时触发,然后输入失去焦点。
你可以手动调用onchange事件使用设置后的值:
$("#mytext").val( 777 ).change(); // someObject.onchange(); in standard JS
或者,您可以使用以下命令触发事件:
$("#mytext").val( 777 ).trigger("change");