Js代碼在點擊事件後跳過第一行

Question

按照我的以下代碼「Processing」不是先追加，而是直接追加「Saving」。我試着解決這個問題，但沒有得到什麼錯誤的代碼，它不工作，並跳過第一個「處理」行。

$('#ac_submit,#save_as_draft').click(function (e) { 

     $('#save_as_draft').append('<i class="fa fa-refresh fa-spin"></i> Processing'); 
     $('form').find('.invalid_field').removeClass('invalid_field'); 
     var validation_status = 0; 
     $('#mandate_field').empty(); 
     $('input,textarea,select').filter('[required]').each(function(){ 
      if($(this).filter('[required]').val() == ''){ 
//    console.log($(this).filter('[required]').attr('name')); 
       $(this).closest('.form-group').addClass(' has-error has-danger'); 
       $('#ac_submit').removeClass('disabled'); 
       $('#save_as_draft').removeClass('disabled'); 
       if($(this).closest('.hide_devices').hasClass('show_panel') == true){ 
        $('#panel').addClass('invalid_field'); 
        var matched_li = $(this).closest('div[id^="tab_"]').attr('id'); 
        $('li a[href="#'+matched_li+'"]').addClass('invalid_field'); 
       } else {  
        var divId = $(this).closest('.hide_devices').attr('id'); 
        $('li a[div-id="'+divId+'"]').addClass('invalid_field') 
        var action_on_li = divId.replace(/\d+/g, '') 
        if(action_on_li == 'cloneModBusInput'){ 
         $('#mod__bus').addClass('invalid_field') 
        } 
        if(action_on_li == 'cloneSensorInput'){ 
         $('#sen__sor').addClass('invalid_field') 
        } 
        if(action_on_li == 'clonedRelayInput'){ 
         $('#re__lay').addClass('invalid_field') 
        } 
       } 
       $('#mandate_field').empty().html('* Mandatory fields are missing'); 
       validation_status = 1; 
       $(this).addClass('disabled'); 
       $(this).html('<i class="fa fa-save"></i> '+$(this).text()+''); 
       e.preventDefault(); 
      } 
     }); 
     if(validation_status == 0){ 
      $('#mandate_field').empty(); 
      $(this).addClass('disabled'); 
      $(this).html('<i class="fa fa-refresh fa-spin"></i> Saving'); 
     } else { 
      $(this).addClass('disabled'); 
      $(this).html('<i class="fa fa-save"></i> '+$(this).text()+''); 
     } 
    }); 

請幫我在上面的代碼中找出最新的錯誤。

Answer 1

您的代碼同步運行。你所做的是將一個元素附加到一個容器中，並用幾行代替新內容中相同元素的整個html內容。結果是你描述得到的。

如果你想看看以前的內容半秒做到以下幾點：

var self = this; 

setTimeout(function() { 
    if (validation_status == 0) { 
     $('#mandate_field').empty(); 
     $(self).addClass('disabled'); 
     $(self).html('<i class="fa fa-refresh fa-spin"></i> Saving'); 
    } 
}, 500); 

Answer 2

那是因爲你覆蓋您的 「加工」：

$('#save_as_draft').append('<i class="fa fa-refresh fa-spin"></i> Processing'); 

這裏：

$(this).html('<i class="fa fa-refresh fa-spin"></i> Saving');