кнопка на клике предотвращает отправку формы

Question

У меня есть фрагмент, чтобы предотвратить двойные щелчки по ссылкам, оформленным в виде кнопок.

 $('.btn').on('click', function(e) { 

      if($(this).prop('disabled') == true) { 
       $(this).attr("href","javascript:void(0);"); 
      } 

      $(this).prop('disabled',true); 

     }); 

Моя проблема заключается в том, что этот код препятствует отправке формы отправки. Является ли это ожидаемым поведением из вышеуказанного кода?

Answer 1

Похоже, что отключение кнопки предотвращает появление пузырьков в DOM и запуск отправки. Есть несколько способов обойти это, но самый простой, вероятно, будет проверять, если это кнопка отправки на форме и обработки вручную следующим образом:

$('.btn').on('click', function(e) { 
 
    var trigger = $(this); 
 
    if (trigger.prop('disabled') == true) { 
 
    trigger.attr("href", "javascript:void(0);"); 
 
    } 
 

 
    trigger.prop('disabled', true); // disables form submit event bubbling 
 

 
    if (trigger.is('[type="submit"], .submit')) { // check if submit button 
 
    var form = trigger.closest("form, .form"); // find form 
 
    if (form.length) { // if form exists 
 
     form.submit(); // manually trigger form submit 
 
    } 
 
    } 
 
}); 
 

 
$("form").on("submit", function() { 
 
    alert("submitting..."); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form style="border: 2px solid black; padding: 10px 0;"> 
 
    Form: 
 
    <input type="submit" class="btn" /> 
 
    <button class="submit btn">.submit</button> 
 
</form> 
 
<br/> 
 
<button class="btn">Non-form button.btn</button> 
 
<input type="button" class="btn" value="non-form input.btn">