After ajax submit, the message is repeated

Question

When I run submit, an alert message occurs as many times as you send it before you reload.

For example.

first run submit occur success message

not refresh second run submit two repeat occurs success message

not refresh third run submit three repeat occurs success message

...

not refresh n run submit n repeat occurs success message

Why does it run like this? How can I solve this problem?

My code is as follows.

$(document).ready(function() {
            $('#my_modal').on('show.bs.modal', function(e) {
                var p_index = $(e.relatedTarget).data('p_index');
                $(e.currentTarget).find('input[name="p_index"]').val(p_index);

                $("button#submit").click(function() {
                    $.ajax({
                        type: "POST",
                        async: false,
                        url: "../receipt/send.php",
                        data: $('form.send_p_index').serialize(),
                        success: function(data) {
                            alert("success")
                            $("#send_p_index")[0].reset()
                            $("#my_modal").modal('hide');
                        },
                        error: function() {
                            alert("Error");
                        }
                    });
                });

            });
        }

Answer 1

WRONG

$(document).ready(function() {
            $('#my_modal').on('show.bs.modal', function(e) {
                var p_index = $(e.relatedTarget).data('p_index');
                $(e.currentTarget).find('input[name="p_index"]').val(p_index);

                $("button#submit").click(function() {
                    $.ajax({
                        type: "POST",
                        async: false,
                        url: "../receipt/send.php",
                        data: $('form.send_p_index').serialize(),
                        success: function(data) {
                            alert("success")
                            $("#send_p_index")[0].reset()
                            $("#my_modal").modal('hide');
                        },
                        error: function() {
                            alert("Error");
                        }
                    });
                });

            });
        }

CORRECT: Put this outside of modal.shown because every time the modal shown, it will write a submit function that repeats as many as it shown.

 $(document).on('click', 'button#submit', function() {
                    $.ajax({
                        type: "POST",
                        async: false,
                        url: "../receipt/send.php",
                        data: $('form.send_p_index').serialize(),
                        success: function(data) {
                            alert("success")
                            $("#send_p_index")[0].reset()
                            $("#my_modal").modal('hide');
                        },
                        error: function() {
                            alert("Error");
                        }
                    });
});