在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

即使我使用了 preventDefault，我也无法提交表单（页面刷新后没有采取任何行动）。

解读："页面刷新 "和 "使用了preventDefault "这两个语句说明问题出在了 $("#id").submit( 没有被触发，而页面的默认提交正在启动，因此出现了 "页面刷新"。

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

另一种方法是使用事件委托。 虽然不清楚代码是在HTML生成之前运行，还是在HTML生成之后添加（微妙的区别）。

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

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

     $.ajax({...

});