我只调用ajax一次，但ajax被调用很多次

Question

我正在尝试编写一些代码来在单击按钮时发出请求。当我单击按钮时，会发出多个请求，我不明白为什么会发生这种情况。

这是刀片文件中按钮的代码：

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

我不知道为什么会提出多个请求。请任何人都可以帮忙

Answer 1

这是因为你的

$('body').on('click', '#saveaudios', function (e) {});

多次注册了点击事件。这可能是因为您的脚本被多次加载、事件传播等。因此，您需要使用

off()

事件处理程序删除先前的事件。因此，您的新代码将如下所示：

$('body').off('click', '#saveaudios').on('click', '#saveaudios', function(e) {
    // your ajax logic
});