$(document).on('submit', function { })，设置return false无效，页面依然提交

Question

直接上代码吧：
html:

        <div class="col" id="btnLocation" style="text-align: right">
            <button class="btn light-blue waves-effect waves-light" id="closeWindowEnd">取消</button>
            <button class="btn light-blue waves-effect waves-light" id="submitData">确认</button>
        </div>

JS:

    /**
     * 确认按钮，开始提交数据
     */
    $('#submitData').on('submit', function() {
      var formData = new FormData(document.getElementById('fileuploadform'));
      // 获取checkbox
      var privateModel = $('#privateModel');
      var allowDownload = $('#allowDownload');
      if (privateModel.get(0).checked === true) {
        formData.append('_privateModel', '1');
      } else {
        formData.append('_privateModel', '0');
      }
      if (allowDownload.get(0).checked === true) {
        formData.append('_allowDownload', '1');
      } else {
        formData.append('_allowDownload', '0');
      }
      // 关闭当前弹窗，弹出进度条
      $('#uploadModalTwo').modal('close');//  关闭当前model
      $('#uploadModalThree').modal(modalOptionsTwo).modal('open');
      progressBar('/Model/UploadModel', formData);
/*      components.remoteQFormData('/Model/UploadModel', formData, 'POST').done(function(data) {
        console.log('输出内容：' + data);
      }); */
      return false;
    });
    

页面如下，

这里为了让html的表单require属性生效，必须使用on('submit',function(){})如果是用click，那么require属性失效，
然后问题就来了，只要设置了on跟submit绑定，那么及时我function内部设置了 return false 依然发生页面提交，提交到了当前被遮罩页面。这个提交怎么才能拦住呢？

Answer 1

搞错了，要绑定的不是button的 onsubmit 是form的onsubmit

Answer 2

你需要阻止默认事件的执行, evt.preventDefault()

试试事件触发时, 阻止默认事件操作.

$(document).on('submit', function(evt) {
  evt.preventDefault();
});

如果在 document 阻止不能的话, 这个可能就属于冒泡事件的问题, 原始元素的事件已经被执行了. 你就不能绑定
document 上的 submit 事件了, 你需要选择对应的 form 元素, 直接绑定其 submit 事件, 并阻止默认操作执行.