Chrome在提交按鈕時使用AngularJS指令時未提交表單

Question

我已經編寫了一個AngularJS指令，如下所示，它禁用表單提交上的HTML按鈕，或單擊按鈕時，並替換按鈕的內部文本。這適用於IE和Firefox，但在Chrome中，修改按鈕的代碼可以成功執行，但表單不會提交，也不會向服務器發出請求。

HTML按鈕的一個例子：

<button submit-button submit-title="Generating Report..." 
     type="submit" class="btn btn-primary"> 
     <i class="fa fa-database mr-xs"></i>Generate Report 
</button> 

的AngularJS指令：

(function() { 

    function submitButton() { 
     return { 
       restrict: 'A', 
       require: '^form', 
       scope: { 
        submitTitle: '@' 
       }, 
       link: function ($scope, $element, $attributes) { 
        $element.on('click', function() { 
         var element = $element[0]; 
         element.innerHTML = element.innerHTML 
          .replace(element.innerText, $attributes.submitTitle); 
         element.disabled = true; 
         $element.addClass('disabled'); 
        }); 
       } 
      }; 
    } 

    angular.module('adminApp', []) 
     .directive('submitButton', submitButton); 
})(); 

我用小提琴手審查請求和響應，並確認沒有在Chrome中提出的要求當按鈕被點擊或表單提交時。任何幫助，將不勝感激。

Answer 1

如果您在附加的點擊事件處理程序中禁用該元素，Chrome將不會提交表單。

使用submit事件，而不是：

$element.on('submit', function() { 

    // Do stuff 
});