jquery ajax 单击一次被调用 6 次

Question

使用 c#、mvc 5 这是我客户端的 ajax 调用代码：

function addEventListener()
    {
        //used this as well to unbind the events but didn't work
        //$('#createNotification').unbind().bind('click', function (e) {
        $('#createNotification').bind('click', function (e) {
            if($('#form').valid())
            {
                $.ajax({
                    url: '@Url.Action("Create","Notification")',
                    data: {
                        Title: $('#notifTitle').val(),
                        Message: $('#notifContent').val()
                    },
                    type:'POST',
                    success: function(dt)
                    {
                        // did not fix the problem
                        //$('#createNotification').unbind('click');
                        alert('arash');
                    }
                });
            }
        });
    }

这是我的 .ready 代码：

$(document).ready(function()
    {
        $("#form").validate({
            rules: {
                Title: {
                    required: true
                },
                Message: {
                    required: true
                }
            }
        });
        addEventListener();
    })

单击按钮后，事件被触发 6 次，我收到 6 次警报，我搜索了 SO 并尝试了很多解决方案，但没有一个对我有用。我真的迷路了，因为调用应该只发生一次，但实际上没有。

如有任何帮助，我们将不胜感激。

Answer 1

来自 jQuery validation 的文档：

submitHandler (default: native form submit)

Type: Function() Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it is validated.

尝试进行此更改并让我们知道问题是否已解决：

$(document).ready(function() {
    $("#form").validate({
            rules: {
                Title: {
                    required: true
                },
                Message: {
                    required: true
                }
            },
            submitHandler: addEventListener
   });

   function addEventListener() {
      $.ajax({
            url: '@Url.Action("Create","Notification")',
            data: {
                Title: $('#notifTitle').val(),
                Message: $('#notifContent').val()
            },
            type: 'POST',
            success: function (dt) {
                // did not fix the problem
                //$('#createNotification').unbind('click');
                alert('arash');
            }
        });
  }
});

工作示例fiddle

jquery ajax 单击一次被调用 6 次

jquery ajax is being called 6 times on single click

jquery

ajax

jquery-validate