ajax提交后，消息重复

Question

当我运行提交时，在重新加载之前，警报消息会出现与您发送的次数一样多的次数。

例如。

第一次运行提交发生成功消息

不刷新第二次运行提交两次重复发生成功消息

不刷新第三次运行提交三重复发生成功消息

...

不刷新n运行提交n重复发生成功消息

为什么会这样运行？ 我该如何解决这个问题？

我的代码如下。

$(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

错误

$(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");
                        }
                    });
                });

            });
        }

正确：将其放在 modal.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");
                        }
                    });
});