jquery - 事件.PreventDefault(); 在嵌套的 onClick 函数中不起作用
问题描述
我正在使用 ajax 函数将我的数据提交给控制器,该函数完美地返回结果,但问题是 ajax 在触发点击事件时多次发布数据。请注意,我的函数结构按以下顺序排列:
<script>
$(document).ready(function(){
$(document).on('click','.editapp', function() {
// ................
$(document).on('click','.JustClick', function(e){
// .................
})
})
});
</script>
<script>
$(document).ready(function() {
$(document).on('click', '.editapp', function() {
var app = $(this).attr('data-target');
var appeal_id = $(app).find('input[name="appeal_id"]').val();
var dataStr = 'appeal_id=' + appeal_id;
$(document).on('click', '.JustClick', function(e) {
e.preventDefault(); // default action us stopped here
$.ajax({
url: "/swalReturn/" + appeals_id,
type: 'POST',
//dataType: 'application/json',
data: dataStr,
cache: false,
success: function(data) {
Swal({
title: 'Prison History',
type: 'info',
html: data,
})
},
error: function(xhr, ajaxOptions, thrownError) {
swal("Error!", "Check your input,Please!", "error");
$('.editapp').modal('hide');
}
});
});
});
});
</script>
Click 事件应该触发一次,并且 ajax 请求应该只针对该特定记录而不是以前的缓存数据(仅单击项目)
解决方案
不要内联您的点击事件,使用相同范围内的变量在点击事件之间传递值
<script>
$(document).ready(function() {
var app, appeal_id, dataStr;
$(document).on('click', '.editapp', function() {
app = $(this).attr('data-target');
appeal_id = $(app).find('input[name="appeal_id"]').val();
dataStr = 'appeal_id=' + appeal_id;
});
$(document).on('click', '.JustClick', function(e) {
e.preventDefault(); // default action us stopped here
$.ajax({
url: "/swalReturn/" + appeals_id,
type: 'POST',
//dataType: 'application/json',
data: dataStr,
cache: false,
success: function(data) {
Swal({
title: 'Prison History',
type: 'info',
html: data,
})
},
error: function(xhr, ajaxOptions, thrownError) {
swal("Error!", "Check your input,Please!", "error");
$('.editapp').modal('hide');
}
});
});
}); </script>
还要确保您没有将此代码放在 php 循环中
推荐阅读
- google-cloud-platform - 如何将存储桶从一个谷歌云帐户转移到另一个?
- javascript - 为什么 Google Chrome 中的 SpeechSynthesis.getVoices() 返回一个空列表?
- assembly - %eax, %edx, %ecx 在同一个函数框架中的使用规则
- python - 阻止 xml.etree 将特殊字符写入 HTML 代码
- mysql - 从多个表中获取所有列的最大值
- javascript - Ruby on Rails - Leaflet-rails 'ReferenceError: L is not defined'
- android - setTitleColor 在drawerlayout android studio内的backpress上不起作用
- shell - 使用 Windows 机器在 Mobaxterm 上编译 cpp 函数的 sh 文件
- r - 抽样随机行
- javascript - 无法在 Expo React 本机应用程序中清除间隔