e.preventDefault jquery 不适用于多个表单和按钮

Question

I have a problem with a JS script I'm working with :

I have a page that handles various operations using AJAX, multiple forms with different IDs are inside the page and in my script I use e.preventDefault at the beginning of ever button's on submit event, so that it doesn't redirect to form's action attribute but instead let me use AJAX and retrieve informations in the console, the problem is that not all the preventDefault work in the file, here it is :

// 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
});

Comments in it says it all, I don't know what I've done wrong and I've spent quite a while trying to figure it out, I hope you can help me.

EDIT : The HTML as requested, a bit long :

<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

Try return false :

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

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