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 (по умолчанию: родная отправка формы)

Тип: Function() Ответный для обработки фактического смиряться, когда форма является действительной. В качестве единственного аргумента получает форму . Заменяет отправку по умолчанию. Правильное место для отправить форму через Ajax после ее проверки.

Попробуйте сделать это изменения и дайте нам знать, если проблема решена:

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