javascript - 为什么ajax会重新加载页面
问题描述
我有一个 ajax + jquery 脚本,当我执行它(单击按钮)时,它会重新加载页面。
脚本
jQuery(document).ready(function($) {
$(document).on('click', '.image-remove-btn', function (e){
var img = $(this).closest('.thumbs');
var id = img.attr('data-id');
$.ajax({
url: admin_url('admin-ajax.php'),
type: 'POST',
data: {deletedId : id},
success: function( data ) {
img.remove();
}
});
});
});
应删除的元素的 HTML:
<div class="thumbs ui-droppable">
<div class="inner ui-draggable ui-draggable-handle" data-thumb="0">
<img data-id="32949" src="https://badzingerauto.com/wp-content/uploads/2021/05/NISSAN__QASHQAI__1-5_dCi_106_Acenta__inc-__inc-__2009__BC501CF-e01-350x205.jpg">
<div class="inner-hover">
<button class="image-remove-btn butterbean-remove-image"> <!-- <i class="fa fa-arrows"></i> Font Awesome fontawesome.com -->
</div>
</div>
</div>
解决方案
我认为@Charlieft 是正确的,您可以按如下方式更改代码以防止重新加载
jQuery(document).ready(function($) {
$(document).on('click', '.image-remove-btn', function (e){
e.preventDefault();
var img = $(this).closest('.thumbs');
var id = img.attr('data-id');
$.ajax({
url: admin_url('admin-ajax.php'),
type: 'POST',
data: {deletedId : id},
success: function( data ) {
img.remove();
}
});
});
});
推荐阅读
- terraform - 使用 Terraform 将叶子接口附加到 Cisco ACI 上的 EPG
- python - 在 ubuntu 上,如何在现有的 python3.6(或更新版本)安装旁边安装 python3.5?
- apache-kafka - broker的数量和partition的数量会影响partition leader的选举吗?
- sql - SQL Server:为什么 SELECT * INTO 比 SELECT * 快(排除网络)
- c - 二维数组中某些满足条件的元素不显示
- .net - 在 Visual Studio 2019 上使用 .sass 扩展文件
- vue.js - VueJs Watch 每个模型的键
- sql - 将 Postgre 转换为 Bigquery
- spring-boot - spring boot:连接oracle数据库
- amazon-web-services - 在 null 中定义的 bean 'AmazonEc2InstanceDataPropertySourcePostProcessor' 无法注册