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

您可能还需要添加e.stopPropagation();以阻止事件冒泡DOM树。

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

        alert("Stopped Redirecting");

        // function call goes here

        return false;
  });
});

Demo

即使在e.preventDefault（）jquery之后页面也会刷新

1 个答案: