e.preventDefault jquery 无法使用多个表单和按钮

Question

我正在使用的 JS 脚本有问题：

我有一个使用 AJAX 处理各种操作的页面，页面内有多个具有不同 ID 的表单，在我的脚本中，我在每个按钮的提交事件开始时使用 e.preventDefault，这样它就不会重定向到表单的 action 属性，而是让我使用 AJAX 并在控制台中检索信息，问题是并非所有的 preventDefault 都在文件中工作，这里是：

// Various buttons to show/hide things, here e.PreventDefault works

$('#AddCategoryLinkToggle').on('click', function(e) {
    e.preventDefault();
    $('#addACategoryBlock').fadeIn();
});

$('#AddBrandLinkToggle').on('click', function(e) {
    e.preventDefault();
    $('#addABrandBlock').fadeIn();
});

$('#CloseAddCategory').on('click', function(e) {
    e.preventDefault();
        $('#addACategoryBlock').fadeOut();
    });
$('#CloseAddBrand').on('click', function(e) {
    e.preventDefault();
        $('#addABrandBlock').fadeOut();
    });

// end various buttons section

// FIRST AJAX SCRIPT, this e.PreventDefault works

$('#AddCategoryForm').on('submit', function(e) {
    // Stop the browser from submitting the form.
    e.preventDefault();
    var postData = $(this).serializeArray();
    var Actionurl = $(this).attr('action');
    $.post(Actionurl, postData)
    .fail(function(data) {
        $('#AddCategoryError').fadeIn();
        $('#AddCategoryForm').fadeOut();
    })
        .done(function(data) {
            //console.log(data);
            $('#AddCategoryForm').fadeOut();
            $('#AddCategorySuccess').fadeIn();
            setTimeout(function(){ location.reload(); }, 2000);

    });
    // TODO
});

// 2nd AJAX script, it works since it's the same as the first one

$('#AddBrandForm').on('submit', function(e) {
    // Stop the browser from submitting the form.
    e.preventDefault();
    var postData = $(this).serializeArray();
    var Actionurl = $(this).attr('action');
    $.post(Actionurl, postData)
    .fail(function(data) {
        $('#AddBrandError').fadeIn();
        $('#AddBrandForm').fadeOut();
    })
        .done(function(data) {
            //console.log(data);
            $('#AddBrandForm').fadeOut();
            $('#AddBrandSuccess').fadeIn();
            setTimeout(function(){ location.reload(); }, 2000);

    });
    // TODO
});

// 3rd AJAX script , DOESN'T WORK

$('#DeleteModal').on('submit', function(e) {
    // Stop the browser from submitting the form.
    var target = $(this);
    var postData = $(this).serializeArray();
    var Actionurl = $(this).attr('action');
    var category_name = postData[1]['value'];

    e.preventDefault();
    $.post(Actionurl, postData)
    .fail(function(data) {
        //$('#'+ category_name +'ConfirmDelete').removeClass("disabled");
        //$('#'+ category_name +'PostAlertError').fadeIn('fast');
    })

    .done(function(data) {
        //$('#'+ category_name +'ConfirmDelete').addClass("disabled");
        //$('#'+ category_name +'PostAlertSuccess').fadeIn('fast');
        alert("Fatto!");
    });

    $('.closeModal').click(function(e) {
        $('#'+ category_name +'ConfirmDelete').removeClass("disabled");
        $('.postAlert').hide();
        location.reload();
    });
    // TODO
});

// 4th AJAX script, DOESN'T WORK - same as previous

$('#EditCategoryForm').on('submit', function(e) {
    // Stop the browser from submitting the form.
    e.preventDefault();
    var postData = $(this).serializeArray();
    var Actionurl = $(this).attr('action');
    var category_name = postData[1]['value'];
    $.post(Actionurl, postData)
    .fail(function(data) {
        $('#'+ category_name +'EditCategoryError').fadeIn();
        $('#EditCategoryForm').fadeOut();
        $('#'+ category_name +'ConfirmCategoryEdit').addClass("disabled");

    })
        .done(function(data) {
            console.log(data);
            $('#EditCategoryForm').fadeOut();
            $('#'+ category_name +'EditCategorySuccess').fadeIn();
            $('#'+ category_name +'ConfirmCategoryEdit').addClass("disabled");

    });

    // Reset Modals and Cards
    $('#'+ category_name +'CloseEditCategoryModal').click(function(e) {
        $('#'+ category_name +'ConfirmCategoryEdit').removeClass("disabled");
        $('.postAlert').hide();
        setTimeout(function(){ location.reload(); }, 2000);
    });
    // TODO
});

里面的评论说明了一切，我不知道自己做错了什么，我花了很长时间才弄清楚，希望你能帮助我。

编辑 : 要求的 HTML，有点长 :

<div class="container">
<div id="addACategoryBlock">
<div class="row">
    <div class="col-lg-12"><h4>Add a new category to the site</h4></div>
</div>
<div class="row">
  <div class="col-lg-12">
  <div class="row">
    <div class="col-lg-12">
      <div id="AddCategorySuccess" class="alert alert-success alert-dismissible postAlert">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <h4><i class="icon fa fa-check"></i> Category Added successfully!</h4>
      </div>
      <div id="AddCategoryError" class="alert alert-warning alert-dismissible postAlert">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <h4><i class="icon fa fa-warning"></i> There's been an error</h4>
      </div>
    </div>
  </div>
    <form id="AddCategoryForm" method="POST" action="{{ path_for('auth.categories.add') }}">
              <div class="form-group">
                  <div class="col-lg-6">
                    <input name ="category_name" class="form-control" id="category_name" placeholder="Name" type="text" required>
                    <input name="slug" class="form-control" id="slug" placeholder="Slug" type="text" required>
                  </div>
              </div>
              <div class="form-group">
                  <div class="col-lg-6">
                  <label>Select a brand to connect it with this new category</label>
                    <select multiple="multiple" class="form-control" name="brands[]" size="{{ countNum }}">
                      {% for brand in brands %}
                      <option value="{{ brand.brand_id }}">{{ brand.brand_name|capitalize }}</option>
                      {% endfor %}
                  </select>
                  </div>
              </div>

              <div class="form-group">
                  <div class="col-lg-6 text-center">
                    <button type="submit" class="btn btn-primary">Add category</button>
                  </div>
                  <div class="col-lg-6 text-center">
                    <button id="CloseAddCategory" type="button" class="btn btn-primary">Close</button>
                    {{ csrf.field | raw }}
                  </div>
                </div>
            </form>
  </div>
  </div>
  </div>



  <div class="row">
    <div class="col-lg-12">
  <h1>Categories</h1>
  <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">Categories in the site</h3>
              <small class="pull-right">or <a id="AddCategoryLinkToggle" href="#">add a new category</a></small>
            </div>

            <!-- /.box-header -->
            <div class="box-body">
              <table class="table table-bordered table-striped text-center">
                <tbody><tr>
                  <th>#</th>
                  <th>Name</th>
                  <th>Slug</th>
                  <th>Brands inside this category</th>
                  <th>Action</th>
                </tr>
                {% for category in categories %}
                <!-- Modal -->
                <div class="modal fade" id="{{ category.slug }}Delete" tabindex="-1" role="dialog" aria-labelledby="{{ category.slug }}DeleteLabel">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="{{ category.slug }}DeleteLabel">Delete {{ category.category_name|capitalize }}</h4>
                      </div>
                      <div class="modal-body">
                        <h2>Are you sure you want to delete {{ category.category_name|capitalize }} ?</h2>
                        <h4>This action is permanent.</h4>
                        <div id="{{ category.category_name|lower }}PostAlertSuccess" class="alert alert-success alert-dismissible postAlert">
                          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                          <h4><i class="icon fa fa-check"></i> Record deleted successfully!</h4>
                        </div>
                        <div id="{{ category.category_name|lower }}PostAlertError" class="alert alert-warning alert-dismissible postAlert">
                         <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                          <h4><i class="icon fa fa-warning"></i> Alert!</h4>
                          Warning alert preview. This alert is dismissable.
                        </div>

                      </div>
                      <div class="modal-footer">
                        <form id="DeleteModal" class="DeleteModal" method="POST" action="{{ path_for('auth.categories.delete') }}">
                        <input name="category_id" type="hidden" value="{{ category.category_id }}">
                        <input class="category_name" name="category_name" type="hidden" value="{{ category.category_name|lower }}">
                        <button type="button" class="btn btn-default closeModal" data-dismiss="modal">Close</button>
                        <button id="{{ category.category_name|lower }}ConfirmDelete" name="confirmDelete" type="submit" class="btn btn-primary confirmDelete">Confirm</button>
                        {{ csrf.field | raw }}
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
                  <div class="modal fade" id="{{ category.slug }}Edit" tabindex="-1" role="dialog" aria-labelledby="{{ category.slug }}EditLabel">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                          <h4 class="modal-title" id="{{ category.slug }}EditLabel">Edit {{ category.category_name|capitalize }}</h4>
                        </div>
                        <form id="EditCategoryForm" method="POST" action="{{ path_for('auth.categories.edit') }}">
                          <div class="modal-body">
                          <div id="{{ category.category_name|lower }}EditCategorySuccess" class="alert alert-success alert-dismissible postAlert">
                          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                          <h4><i class="icon fa fa-check"></i> Record updated successfully!</h4>
                        </div>
                        <div id="{{ category.category_name|lower }}EditCategoryError" class="alert alert-warning alert-dismissible postAlert">
                         <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                          <h4><i class="icon fa fa-warning"></i> Alert!</h4>
                          There's been an error!
                        </div>
                          <div class="form-group">
                            <label for="EditName">Name</label>
                            <input type="text" class="form-control" name="EditName" id="EditName" placeholder="Name" value="{{ category.category_name|capitalize }}">
                            <label for="EditSlug">Slug</label>
                            <input type="text" class="form-control" name="EditSlug" id="EditSLug" placeholder="Slug" value="{{ category.slug }}">
                          </div>
                          <div class="form-group">
                            <label>Edits brands connected with this category</label>
                            <select multiple="multiple" class="form-control" name="brands[]" size="{{ countNum }}">
                            {% for brand in brands %}
                              {% if brand.brand_id in correlated %}
                              <option selected="selected" value="{{ brand.brand_id }}">{{ brand.brand_name|capitalize }}</option>
                              {% else %}
                              <option value="{{ brand.brand_id }}">{{ brand.brand_name|capitalize }}</option>
                              {% endif %}

                            {% endfor %}
                            </select>
                            <input type="hidden" class="form-control" name="category_id" id="category_id" value="{{ category.category_id }}">
                          </div>
                          </div>
                          <div class="modal-footer">
                            <button id="{{ category.category_name }}CloseEditCategoryModal" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button id="{{ category.category_name }}ConfirmEditModal" type="submit" class="btn btn-primary">Save changes</button>
                          </div>
                          {{ csrf.field | raw }}
                        </form>
                      </div>
                    </div>
                  </div>
                <!-- end modal -->
                <tr>
                  <td>{{ category.category_id }}</td>
                  <td>{{ category.category_name|capitalize  }}</td>
                  <td>{{ category.slug  }}</td>
                  <td>
                    <ul>
                      {% for brand in category.brands %}
                        <li>{{ brand.brand_name }}</li>
                      {% endfor %}
                    </ul>
                  </td>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#{{ category.slug }}Delete">Delete</button> 
                      <button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#{{ category.slug }}Edit">Edit</button>
                      <!--<a href="{{ path_for('auth.categories') }}/edit/{{ category.category_id }}" target="_blank">Prova edit</a>-->
                    </div>
                  </td>
                </tr>
                {% endfor %}

              </tbody></table>
            </div>
            <!-- /.box-body -->
            <div class="box-footer clearfix">
              <!--<ul class="pagination pagination-sm no-margin pull-right">
                <li><a href="#">«</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">»</a></li>
              </ul>-->

            </div>
          </div>
          </div>
</div>
</div>

Answer 1

尝试 return false:

$('#DeleteModal').on('submit', function (e) {
    // ...
    return false;
});

$('#EditCategoryForm').on('submit', function (e) {
    // ...
    return false;
});

e.preventDefault jquery 无法使用多个表单和按钮

e.preventDefault jquery not working with multiple forms and buttons

javascript

forms

jquery

preventdefault