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

ajax提交后，消息重复

After ajax submit, the message is repeated

javascript

php

ajax