Почему происходит зацикливание в ajax запросе?

Question

[Евгений Москаленко]

При успешном выполнении всё отрабатывает. Но при нажатии обратно в поле модальные окна #invalid-login-data/#empty-fields исчезают и появляются заново. Почему так происходит и как это исправить? Заранее благодарю.

function sendData() {
  $(this).on('click', function() {
    var login_val = $('input[name="login"]').val();
    var password_val = $('input[name="password"]').val();

    $.ajax({
      type: "POST",
      url: "template/enter.php",
      data: {
        login: login_val,
        password: password_val
      },
      success: function(result) {
        if (result === "Invalid login or password") {
          $('#invalid-login-data').fadeIn();
        } else if (result === "One or more fields is empty") {
          $('#empty-fields').fadeIn();
        }
      },
      error: function() {
        alert('Problem whith POST!');
      }
    });

    $('input:text, input:password').on('focus', function() {
      $('#invalid-login-data').fadeOut();
      $('#empty-fields').fadeOut();
    });
  });
}

Comments

[Dark Hole]

Залейте на кодепен или джсфиддле

[Евгений Москаленко]

Dark Hole: зачем там же php + mysql

[Александр Карпов]

а ссылку на сервер ваш можете дать?

[Александр Карпов]

Какой смысл заложен здесь?
$('input:text, input:password').on('focus', function() {
$('#invalid-login-data').fadeOut();
$('#empty-fields').fadeOut();
});

[Евгений Москаленко]

Александр К: делаю пока на локале. Смысл таков, что при не соответсвии всплывает модалка. А при нажатии обратно на поле, модалка пропадает

[Александр Карпов]

Евгений Москаленко: ответил вам

Answer 1

[Александр Карпов]

в success выведите что-нибудь в консоль лог, он при закрытии у вас там не отрабатывает заново?
у вас вешается событие на $(this).on('click', function()это вероятно тот же объект что здесь

$('input:text, input:password').on('focus', function() {

т.е вас поэтому и просят всё показать. вы функцию как вызываете? наверное onclick="sendData()"
вам бы еще this в нее передать, а то this наверное у вас внутри нее это весь документ
а потом снова кликаете по этому this

А лучше, попробуйте убрать

$(this).on('click', function() { //убрать
//.......код внутри оставить........
}); //убрать

Comments

[Евгений Москаленко]

Вызываю onclick="". Да, success заново отрабатывает при клике в любом месте

[Евгений Москаленко]

Евгений Москаленко: и onclick="" вешаю на кнопку

[Александр Карпов]

Евгений Москаленко: function sendData(this_element) {
$(this_element)
так напишите, а там где онклик onclick="sendData(this)"
не будет отрабатывать на всём документе

[Александр Карпов]

прошу прощения, я спать. Надеюсь я донёс до вас концепцию ошибки. Вы вешаете обработчик события не туда. уберите вообще обработчик этот. оставьте только функцию

[Александр Карпов]

Евгений Москаленко: добавил к своему ответу вариант. может быть вам поможет.

[Евгений Москаленко]

Александр К: Спасибо большое! Вы мне очень помогли))