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

问题描述

问 题

直接上代码吧：
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 依然发生页面提交，提交到了当前被遮罩页面。这个提交怎么才能拦住呢？

解决方案

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

这篇关于javascript - $(document).on('submit', function { })，设置return false无效，页面依然提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！