To all;
I have created a up and down counter for decimal places and when a change occurs I have it force a blur event to recalculate fields with the following code:
$('button').click(function(){
var decPlaces = document.calculator.dpv.value * 1;
var hii = document.calculator.origin.value;
if (this.id == 'up' && decPlaces < 9){
document.calculator.dpv.value = decPlaces + 1;
if (hii != ''){
document.calculator[hii].focus();
document.calculator[hii].blur();
}
}
if (this.id == 'down' && decPlaces > 0){
document.calculator.dpv.value = decPlaces - 1;
if (hii != ''){
document.calculator[hii].focus();
document.calculator[hii].blur();
}
}
Works well in FF but drags in others particularly IE - suggestions on making the cleaner and faster is appreciated.
Bob
The official jquery way to trigger/force an event is
$("selector").trigger("blur");
$("selector").trigger("focus");
But I'm not sure this is what will help you.
You're mixing jQuery and DOM calls, you should really avoid doing that.
Create specific handlers for the Down and Up buttons (by using either ID tags or class tags) and then change the value of your calculator value by calling the jQuery $("#calculator").val(decPlaces + 1);
I hate unreadable code, so I just formatted that for you :)
jQuery(function($) { $("button").bind("click", function(e){
var decPlaces = $('#dpv').val() * 1;
var hi1 = $('#origin').val();
if (this.id == 'up' && decPlaces < 5){
$('#dpv').val(decPlaces + 1);
if (hi1 != ''){
$('#' + hi1).trigger("blur");
}
}
if (this.id == 'down' && decPlaces > 0){
$("#dpv").val(decPlaces - 1);
if (hi1 != ''){
$('#' + hi1).trigger("blur");
}
}
});
$('input.auto').focus(function(){
if (this.id != 'dpv'){
$(this).parent().addClass("curFocus")
}
});
$('.clearAll').focus(function(){ $('.clearAll').val(""); });
$('input.auto').blur(function(){
$(this).parent().removeClass("curFocus")
var sqft = 10.76391041670972192890; //square feet per square meter
var lbs = 2.20462262184877566540; //pounds per kilo
var bwiv = '';
var sfiv = '';
var bwmv = '';
var smmv = '';
$('#origin').val(this.id);
if((this.id == 'bwi' || this.id == 'sfi') && this.value != ''){
// imperial
if(this.id == 'bwi'){
bwiv = $.fn.autoNumeric.Strip(this.id);
sfiv = (3000 / bwiv);
$('#sfi').val($.fn.autoNumeric.Format('sfi', sfiv));
}
if(this.id == 'sfi'){
sfiv = $.fn.autoNumeric.Strip(this.id);
bwiv = (3000 / sfiv);
$('#bwi').val($.fn.autoNumeric.Format('bwi', bwiv));
}
bwmv = (((bwiv / lbs) / (3000 / sqft)) * 1000);
smmv = (1000 / bwmv);
$('#bwm').val($.fn.autoNumeric.Format('bwm', bwmv));
$('#smm').val($.fn.autoNumeric.Format('smm', smmv));
}
if((this.id == 'bwm' || this.id == 'smm') && this.value != ''){ //metric
if(this.id == 'bwm'){
bwmv = $.fn.autoNumeric.Strip(this.id);
smmv = (1000 / bwmv);
$('#smm').val($.fn.autoNumeric.Format('smm', smmv));
}
if(this.id == 'smm'){
smmv = $.fn.autoNumeric.Strip(this.id);
bwmv = (1000 / smmv);
$('#bwm').val($.fn.autoNumeric.Format('bwm', bwmv));
}
bwiv = ((((bwmv / 1000) * lbs) / sqft) * 3000);
sfiv = (3000 / bwiv);
$('#bwi').val($.fn.autoNumeric.Format('bwi', bwiv));
$('#sfi').val($.fn.autoNumeric.Format('sfi', sfiv));
}
});
});
After seeing some of the helpful comments I have made the following changes:
jQuery(function($) {
$("button").bind("click", function(e){
var decPlaces = $('#dpv').val() * 1;
var hi1 = $('#origin').val();
if (this.id == 'up' && decPlaces < 5){
$('#dpv').val(decPlaces + 1);
if (hi1 != ''){
$('#' + hi1).trigger("blur");
}
}
if (this.id == 'down' && decPlaces > 0){
$("#dpv").val(decPlaces - 1);
if (hi1 != ''){
$('#' + hi1).trigger("blur");
}
}
});
$('input.auto').focus(function(){
if (this.id != 'dpv'){
$(this).parent().addClass("curFocus")
}
});
$('.clearAll').focus(function(){
$('.clearAll').val("");
});
$('input.auto').blur(function(){
$(this).parent().removeClass("curFocus")
var sqft = 10.76391041670972192890; //square feet per square meter
var lbs = 2.20462262184877566540; //pounds per kilo
var bwiv = '';
var sfiv = '';
var bwmv = '';
var smmv = '';
$('#origin').val(this.id);
if((this.id == 'bwi' || this.id == 'sfi') && this.value != ''){ // imperial
if(this.id == 'bwi'){
bwiv = $.fn.autoNumeric.Strip(this.id);
sfiv = (3000 / bwiv);
$('#sfi').val($.fn.autoNumeric.Format('sfi', sfiv));
}
if(this.id == 'sfi'){
sfiv = $.fn.autoNumeric.Strip(this.id);
bwiv = (3000 / sfiv);
$('#bwi').val($.fn.autoNumeric.Format('bwi', bwiv));
}
bwmv = (((bwiv / lbs) / (3000 / sqft)) * 1000);
smmv = (1000 / bwmv);
$('#bwm').val($.fn.autoNumeric.Format('bwm', bwmv));
$('#smm').val($.fn.autoNumeric.Format('smm', smmv));
}
if((this.id == 'bwm' || this.id == 'smm') && this.value != ''){ //metric
if(this.id == 'bwm'){
bwmv = $.fn.autoNumeric.Strip(this.id);
smmv = (1000 / bwmv);
$('#smm').val($.fn.autoNumeric.Format('smm', smmv));
}
if(this.id == 'smm'){
smmv = $.fn.autoNumeric.Strip(this.id);
bwmv = (1000 / smmv);
$('#bwm').val($.fn.autoNumeric.Format('bwm', bwmv));
}
bwiv = ((((bwmv / 1000) * lbs) / sqft) * 3000);
sfiv = (3000 / bwiv);
$('#bwi').val($.fn.autoNumeric.Format('bwi', bwiv));
$('#sfi').val($.fn.autoNumeric.Format('sfi', sfiv));
}
});
});
The up down buttons that increase or decrease the decimal setting still are not very responsive in IE.
FYI - the autoNumeric function call is to a plugin that I created that that does numeric formatting on the fly.
Thanks again.
Bob
The easiest way is just to trigger a change() event after you change your value!
For example, if you write
$('selector').text('I am changing some text').change();
that should work!
来源：https://stackoverflow.com/questions/1251547/force-an-event-in-jquery