即使在 laravel 中使用 preventDefault 也无法提交页面

Question

即使我使用了 preventDefault，我也无法提交表单，（页面已刷新且未执行任何操作）我的表单输入是动态填写的，这是我的代码。

HTML

<div class="modal-body">
  <form id="update_form">
    <!-- loaded below -->
  </form>
</div>

填写我的表格数据的另一个请求

@csrf
<div class="form-row">
    <div class="form-group col-md-6">
        <input type="hidden" name="request_type" value="{{RegisterTypesNames::Faculty}}">
        <label>University</label>
        <select name="university" class="custom-select" id="university{{$action}}">
            <option selected value="1">University of Cansas</option>
        </select>
    </div>
    <div class="form-group col-md-6">
        <label>Faculty</label>
        <input type="text" class="form-control" name="faculty" id="faculties{{$action}}">
    </div>
    <div class="form-group col-md-6">
        <label>Init</label>
        <input type="text" class="form-control" name="short_name" id="short_names{{$action}}">
    </div>
</div>
<button type="submit" class="btn btn-primary"><span class="fa fa-save"></span> Save</button>

和jquery代码

$('#update_form').submit(function (e) {
    $.ajax({
        url: '/update_data',
        type: "POST",
        data: $('#update_form').serialize(),
        dataType: "json",
        success: function (data) {
            console.log(data.result);
        }

    });
    e.preventDefault();
});

注意：我使用了多个像这样的部分形式，其他的都很好

Answer 1

I can't submit the form even though I used preventDefault, (page refreshed and doesn't take any action)

解释：语句 "page refreshed" 和 "used preventDefault" 表明问题是 $("#id").submit( 中的代码没有触发，页面的默认提交正在启动，因此 "page refreshed".

由于 jquery 事件未触发，这可能意味着脚本运行时 HTML 不存在。这通常可以通过输入 doc.ready 来处理； OP表示已经在doc.ready.

替代方法是使用事件委托。虽然不清楚代码是在生成 HTML 之前是运行还是在生成 HTML 之后添加（细微差别）。

事件委托的解决方案是使用：

 $(document).on("submit", "#update_form", function(e) {
     e.preventDefault();

     $.ajax({...

});

即使在 laravel 中使用 preventDefault 也无法提交页面

Can't submit the page even though using preventDefault in laravel

html

jquery

form-submit

laravel