javascript - Why is my AJAX running 4 times -

http://i.imgur.com/efjv8uv.png

$("#login").on('click', function () {     $(".login .col2, .login .signin, .login .close").fadeout(500, function () {         $(".login .spinner").fadein(500);         var username = $("#username").val();         var password = $("#pw").val();         var data = "username="+username+"&password="+password;         $.ajax({             url: './api/prijava',             method: 'post',             data: data,             datatype: 'json',             success: function(data) {                 if(data.odg == 1) {                     $(".login .spinner").fadeout(500, function() {                         $(".login .msg").append('prijava uspješna').fadein(500, function() {                             window.location = "./";                         });                     });                 } else if(data.odg == 2) {                     $(".login .msg").css('background-color', 'rgba(0, 255, 0, 0.5)').append('<span>prijava uspješna! dobrodošli...</span>').fadein(500, function() {                         window.location = "./?first=true";                     });                  }             },              error: function(err) {                 console.log(err);             }         });     }); }); 

screenshot shows successful login (local language) should show once, rather 4 times. how can make load once , that's it?

the callback fadeout run once per selected element. instead use promise since when resolves runs once:

$(selector).fadeout(500).promise().then(function () {     // ajax call here });