[英]e.preventDefault jquery not working with multiple forms and buttons
我正在使用的 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">×</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">×</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>
嘗試return false ：
$('#DeleteModal').on('submit', function (e) {
// ...
return false;
});
$('#EditCategoryForm').on('submit', function (e) {
// ...
return false;
});
e.preventDefault（）不能在javascript中工作，但可以在jQuery中工作
[英]e.preventDefault() not working in javascript, but working in jQuery
jQuery | e.preventDefault無法處理contentEditable div
[英]jQuery | e.preventDefault not working on contentEditable div
多種動態形式，e.preventDefault(); 沒有正確觸發
[英]Multiple dynamic forms, e.preventDefault(); not triggering properly
e.preventDefault（）與引導箱和jQuery.post（）結合使用時不起作用
[英]e.preventDefault() not working when used with bootbox and jQuery.post()
jQuery Toggle在網址后添加＃，e.preventDefault（）; 不工作
[英]JQuery Toggle adding # after URL, e.preventDefault(); not working
jQuery - 觸發器（“單擊”）在 e.preventDefault() 后不起作用
[英]jQuery - trigger("click") not working after e.preventDefault()
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.