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

Even after calling e.preventDefault()the page still gets refreshed on clicking the button. Any suggestion what I might have missed?

Below is the JADE code for above on click function.

.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
Laksh Goel
  • 169
  • 1
  • 12

1 Answers1

6

You may need to also add e.stopPropagation(); to stop the event from bubbling up the DOM tree.

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

        alert("Stopped Redirecting");

        // function call goes here

        return false;
  });
});

Demo

Thulasiram
  • 8,432
  • 8
  • 46
  • 54