e.preventDefault（）jqueryの後でもページがリフレッシュされます

Question

$('#btn-add-skills').on('click', function(e) { 
     e.preventDefault(); 
     // function call goes here 
    }); 

e.preventDefault()を呼び出した後も、ボタンをクリックするとページが更新されます。 私が逃したかもしれない何か提案？

以下は、上記のクリック機能に関するJADEコードです。

.modal-add-skills.modal.fade 
    .modal-dialog 
    .modal-content 
     .modal-header 
     h4(style='color: black !important;') 
     .modal-body 
     form#addSkills 
      .form-group 
      label.col-form-label(for='Skill') Skill 
      input#skill_input.form-control.required(type='text', name='Skill', placeholder='Start typing to select skill', style="width: 300px;") 
      .modal-footer 
      button#add-skill-data.btn.btn-primary(type='submit') Add 

Answer 1

イベントがDOMツリーをバブリングするのを防ぐには、e.stopPropagation();も追加する必要があります。

$(document).ready(function(){ 
    $('#btn-add-skills').on('click', function(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 

     alert("Stopped Redirecting"); 

     // function call goes here 

     return false; 
    }); 
}); 

Demo