Force an event in jQuery

问题

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

回答1:

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.

回答2:

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);

回答3:

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)); 
      } 
 }); 

});

回答4:

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

回答5:

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