Javascript 每次打开modal时都会触发多次Ajax调用

我正在通过ajax创建一个crud，这是一个编辑功能，如果我打开modal并进行一些更改，并在第一次提交时工作正常，如果我第二次提交表单，它也会编辑当前记录和最后一个记录，这意味着触发两次，第三次触发三次，一次编辑3条记录，而它应该只编辑一条记录

function EditCategory(id) {

    $('#edit-modal').modal('show');
    $('#edit_message').html('');
    $("#edit_message").attr('class', 'alert');
    $('#edit_message').css('display', 'none');
    $('#notification').html('');
    $('#notification').attr('class', 'alert');
    $('#notification').css('display', 'none');

    var category_name = document.getElementById('categoryCode' + id).getElementsByTagName('h4');
    var category_color = document.getElementById('categoryCode' + id).getElementsByTagName('input');
    $('#edit_category_name').val(category_name[0].innerHTML);
    $('#edit_background_color').val(category_color[0].value);

    $('#form-edit').on('submit', function(event) {
        event.preventDefault();

        $('#edit_message').html('');
        $("#edit_message").attr('class', 'alert');
        $('#edit_message').css('display', 'none');

        var name = document.getElementById('edit_category_name').value;
        var color = document.getElementById('edit_background_color').value;

        console.log(name);
        console.log(color);
        console.log(id);


        var file_data = $('#edit_img').prop('files')[0];

        var form_data = new FormData();

        form_data.append('category_name', name);
        form_data.append('img', file_data);
        form_data.append('background_color', color);
        form_data.append('id', id);

        $.ajax({

            url: "{{ url('categories/update') }}",
            method: "POST",
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {

                $('#edit_message').css('display', 'block');
                $('#edit_message').addClass(data.class_name);

                if (data.class_name == 'alert-danger') {
                    $('#edit_message').html("Error! " + data.message);
                } else {
                    $('#edit_message').html(data.message);
                }

                if (data.class_name == 'alert-success') {
                    document.getElementById('categoryCode' + data.id).getElementsByTagName('h4')
                        .innerHTML = data.name;
                    document.getElementById('categoryCode' + data.id).getElementsByTagName('input')
                        .value = data.color;
                    document.getElementById('categoryCode' + data.id).getElementsByTagName('img')
                        .src = data.src;
                }

            }

            //ajax end
        });

        //edit form end
    });

    //edit end

}

---

每当打开模式时，您都将一个新的侦听器绑定到提交事件。每次调用此函数时，它都会在（'submit'）上添加一个新的

。触发此函数3次，您将在（'submit'）

上得到3个

，从而得到3个ajax调用。谢谢jeremy，如何解决此问题，我需要在submit函数中发送一些像id这样的值，这就是为什么我将其放在onclick中的原因function@terry如何解决这个问题,，我需要在submit函数中发送一些像id这样的值，这就是为什么我把它放在onclick中function@sheharyaranwer您可以在加载页面时在窗体上添加调用EditCategory的事件。每当打开模式时，您都将一个新的侦听器绑定到提交事件。每次调用此函数时，它都会在（'submit'）上添加一个新的
。触发此函数3次，您将在（'submit'）

上得到3个

，从而得到3个ajax调用。谢谢jeremy，如何解决此问题，我需要在submit函数中发送一些像id这样的值，这就是为什么我将其放在onclick中的原因function@terry如何解决这个问题,，我需要在submit函数中发送一些像id这样的值，这就是为什么我把它放在onclick中function@sheharyaranwer您可以在窗体上添加一个事件，在加载页面时调用EditCategory。