ボタンをクリックするとフォームの送信が妨げられます

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">