e.preventDefault jQuery的不多种形式和按钮

-2

我有一个JS脚本我的工作问题工作该页面和我的脚本中我使用e.preventDefault在任何按钮的提交事件开始时，以便它不会重定向到窗体的动作属性，而是让我使用AJAX并在控制台中检索信息，问题是不是所有preventDefault在文件中的工作，在这里它是：e.preventDefault jQuery的不多种形式和按钮

// 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>

来源

2017-10-10 K3nzie

我们可以看到HTML部分过吗？ – Lixus

发布你的html，有时它发生，因为你有一个窗体内的其他形式。 – Ali

@Lixus HTML添加了 – K3nzie

-1

尝试return false：

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

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

来源

2017-10-10 17:53:40 aaron

是的，我确实包括了它，正如我在评论中所写和写的，这些作品中的一些，所以jquery的作品。 – K3nzie

e.preventDefault jQuery的不多种形式和按钮

回答

相关问题