Функция Jquery .addClass () не работает в Chrome, но прекрасно работает в Mozilla

Question

Я хочу добавить класс в мой тег ввода, используя метод addClass в jquery, но он не работает в Chrome !!!

`
    $('#username-signup').blur(function() {

            var tempusername = $('#username-signup').val();

            $.ajax({
                type: "POST",
                url: "includes/identification.php",
                data: { username: tempusername },
                dataType: "text",
                success: function(response) {
                    //console.log('success');
                    if (response == 'n') {
                        //console.log('n');
                        $('#username-signup').removeClass('identication-y');
                        $('#username-signup').addClass('identication-n');

                    } else {
                        //console.log('else');
                        $('#username-signup').removeClass('identication-n');
                        $('#username-signup').addClass('identication-y');

                    }
                },
                error: function() {

                    //console.log('error');
                },
                timeout: 5000

            });



        });

//html code :

<input type="text" name="username" class="form-control" id="username-signup">



//css :

.identication-n {
    border-color: #ff3547;
}

.identication-y {
    border-color: limegreen;
}



//my php side code :


<?php 
  $x = 'n';
  echo $x;
?>
`

---

что происходит? Какая разница между Chrome и Mozilla? я также использую последнюю версию "jquery"

---

Answer 1

Я подозреваю, что что-то еще вызывает сбой Chrome до или во время вызова AJAX, и response не заполняется или blur не пузырится. Попробуйте следующий код и обновите свой пост. Также просмотрите вкладку «Сеть» до и после вызова ajax, чтобы узнать, отправляете ли вы неверные данные или получаете ошибку в ответе от PHP.

$(function() {
  $('#username-signup').blur(function(e) {
    console.log("Username Signup Blue Event");
    $.ajax({
      type: "POST",
      url: "includes/identification.php",
      data: {
        username: $('#username-signup').val()
      },
      dataType: "text",
      success: function(response) {
        console.log(response);
        if (response == 'n') {
          //console.log('n');
          $('#username-signup').removeClass('identication-y');
          $('#username-signup').addClass('identication-n');
        } else {
          //console.log('else');
          $('#username-signup').removeClass('identication-n');
          $('#username-signup').addClass('identication-y');
        }
      },
      error: function(x, t, err) {
        console.log('Ajax Error:', x, t, err);
      },
      timeout: 5000
    });
  });
});

.identication-n {
  border-color: #ff3547;
}

.identication-y {
  border-color: limegreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="username" class="form-control" id="username-signup">

Answer 2

так как вы можете видеть, что коды в порядке, поэтому я очистил данные браузера в chrome, используя ссылку ниже, и теперь все работает, IDK, в чем была реальная проблема, но здесь есть решение.

chrome://settings/clearBrowserData

очистки за последние 24 часа мне было достаточно.

Answer 3

Ваш код работает нормально на Chrome и FF. Может быть, вы можете попробовать другой подход, который на мой взгляд проще, чем добавление и удаление класса. Вы можете использовать атрибуты data- * для достижения желаемого.

См. Этот пример:

  $('#username-signup').blur(function() {

    var tempusername = $('#username-signup').val();

    $.ajax({
      type: "POST",
      url: "https://jsonplaceholder.typicode.com/posts",
      data: {
        username: tempusername
      },
      dataType: "text",
      success: function(response) {
        console.log(response);

        if (typeof response == 'string') {
          $('#username-signup').attr('data-status', 'n');
        } else {
         $('#username-signup').attr('data-status', 'y');

        }
      },
      error: function() {

        //console.log('error');
      },
      timeout: 5000

    });
  });

input[data-status='n'] {
  border-color: red;
}

input[data-status='y'] {
  border-color: limegreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="username" class="form-control" id="username-signup" data-status="">