英文:
I call ajax only once but ajax is called many times
问题
我正在尝试编写一些代码,以便在点击按钮时发出请求。当我点击按钮时,会发出多个请求,我无法弄清楚为什么会发生这种情况。
这是 Blade 文件中按钮的代码:
<div class="form-group">
@if(!empty($textLesson))
@php
$text_id=$textLesson->id;
$webinar_id=$webinar->id;
$lessonAudio = App\Models\AudioAttachment::where('text_lesson_id',$text_id)->get();
@endphp
<div id="btnDiv">
<x-panel.attach-audio-component :textid="$text_id" :webinarid="$webinar_id" :textLesson="$textLesson"
:userLanguages="$userLanguages" />
</div>
@if(!empty($lessonAudio) and !$lessonAudio->isEmpty())
<div id="audioListings">
</div>
这是包含 Ajax 调用的脚本:
<script>
$(document).ready(function () {
$('body').on('click', '#addAudio', function (e) {
const $this = $(this);
$textid = document.getElementById("addAudio").getAttribute("data-text-id");
$webinarid = $this.attr('data-webinar-id');
//alert($textid);
e.preventDefault();
let add_audio_modal = '<form id="addAudioFiles" method="post" action="/panel/text-lesson/saveaudio" enctype= "multipart/form-data">';
add_audio_modal += '@csrf';
add_audio_modal += $('#audioFilesModal').html();
add_audio_modal += '</div>';
Swal.fire({
html: add_audio_modal,
showCancelButton: false,
showConfirmButton: false,
customClass: {
content: 'p-0 text-left',
},
width: '48rem',
});
});
$('body').on('click', '#saveaudios', function (e) {
e.preventDefault();
const $this = $(this);
let form = $('#addAudioFiles');
let formData = new FormData(form[0]);
formData.append('webinar_id', $webinarid);
formData.append('text_id', $textid);
let action = form.attr('action');
$this.addClass('loadingbar gray').prop('disabled', true);
form.find('input').removeClass('is-invalid');
form.find('textarea').removeClass('is-invalid');
$.ajax({
url: action,
type: 'POST',
data: formData, // 使用 FormData 对象作为要提交的数据
processData: false, // 防止 jQuery 处理数据
contentType: false, // 让浏览器自动设置内容类型
success: function (result) {
if (result && result.code === 200) {
// 处理结果
},
error: function (err) {
// 处理错误代码
}
}
});
});
});
</script>
我不知道为什么会发出多个请求。请问是否有人可以提供帮助?
英文:
I am trying to write some code to make a request when I click a button. When I click my button, multiple requests are being made, and I can't figure out why this is happening.
Here is the code of the button in the blade file:
<div class="form-group">
@if(!empty($textLesson))
@php
$text_id=$textLesson->id;
$webinar_id=$webinar->id;
$lessonAudio = App\Models\AudioAttachment::where('text_lesson_id',$text_id)->get();
@endphp
<div id="btnDiv">
<x-panel.attach-audio-component :textid="$text_id" :webinarid="$webinar_id" :textLesson="$textLesson"
:userLanguages="$userLanguages" />
</div>
@if(!empty($lessonAudio) and !$lessonAudio->isEmpty())
<div id="audioListings">
</div>
Here is the script where ajax is called:
<script>
$(document).ready(function () {
$('body').on('click', '#addAudio', function (e) {
const $this = $(this);
$textid = document.getElementById("addAudio").getAttribute("data-text-id");
$webinarid = $this.attr('data-webinar-id');
//alert($textid);
e.preventDefault();
let add_audio_modal = '<form id="addAudioFiles" method="post" action="/panel/text-lesson/saveaudio" enctype= "multipart/form-data">';
add_audio_modal += '@csrf';
add_audio_modal += $('#audioFilesModal').html();
add_audio_modal += '</div>';
Swal.fire({
html: add_audio_modal,
showCancelButton: false,
showConfirmButton: false,
customClass: {
content: 'p-0 text-left',
},
width: '48rem',
});
});
$('body').on('click', '#saveaudios', function (e) {
e.preventDefault();
const $this = $(this);
let form = $('#addAudioFiles');
let formData = new FormData(form[0]);
formData.append('webinar_id', $webinarid);
formData.append('text_id', $textid);
let action = form.attr('action');
$this.addClass('loadingbar gray').prop('disabled', true);
form.find('input').removeClass('is-invalid');
form.find('textarea').removeClass('is-invalid');
$.ajax({
url: action,
type: 'POST',
data: formData, // use the FormData object as the data to be submitted
processData: false, // prevent jQuery from processing the data
contentType: false, // let the browser set the content type automatically
success: function (result) {
if (result && result.code === 200) {
// do with result
},
error: function (err) {
// error handling code here
}
});
});
});
</script>
i dont know why multiple requests are being made. please any one can help
答案1
得分: 0
这是因为您的$('body').on('click', '#saveaudios', function (e) {});
注册了多次点击事件。这可能是因为您的脚本加载了多次,事件传播等原因。因此,您需要使用off()
事件处理程序来删除先前的事件。因此,您的新代码将如下所示:
$('body').off('click', '#saveaudios').on('click', '#saveaudios', function(e) {
// 您的ajax逻辑
});
英文:
This is because your $('body').on('click', '#saveaudios', function (e) {});
register click events multiple times. This might because of your script is loaded multiple times, event propagation or so on. So, you need to remove the previous event with off()
event handler. So, your new code will looks as follows:
$('body').off('click', '#saveaudios').on('click', '#saveaudios', function(e) {
// your ajax logic
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论