jQuery работает правильно в одном месте, но не в другом

Question

Хорошо, поэтому у меня есть следующий код. Первое предупреждение работает правильно при загрузке, но второе предупреждение никогда не делает. Чтобы добавить, нажатие на кнопку с никогда не работает, но это отдельная проблема. Я чувствую, что «предупреждение» может быть ключом к тому, где id идет не так, поэтому любая помощь будет полезна. Благодарю.

<script> 
    alert("Here #1"); 
    $(document).ready(function() { 
    $("#buttonClick").click(function() { 
     var div = $("#mainBackground"); 
     div.slideUp(400, function() { 
     redirect(); 

     }); 
    }); 
    }); 

    alert("Here #2"); 

    $(document).ready(function() { 
    $("#sign").click(function() { 
     jQuery.ajax({ 
     url: "check_availability.php", 
     data: 'username=' + $("#username").val(), 
     'password=' + $("#password").val(); 
     type: "POST", 
     success: function(data) { 
      alert("hereagain"); 
      if ($("#username").val() === "") { 
      //Do nothing 
      } else if ($('#username').val().length < 5) { 
      $("#usernameConsole").html("Username must be 5-15 characters"); 
      $("#username").css('backgroundColor', '#ff6666'); 
      $("#usernameAvailable").css('color', '#ff6666'); 
      } else if (data === "accept") { 
      $("#usernameConsole").html("Signed In"); 
      $("#username").css('backgroundColor', '#66cc66'); 
      $("#usernameAvailable").css('color', '#66cc66'); 
      } else { 
      $("#usernameConsole").html("Not accepted"); 
      $("#username").css('backgroundColor', '#ff6666'); 
      $("#usernameAvailable").css('color', '#ff6666'); 
      } 
     }, 
     error: function() {} 
     }); 

    }); 
    }); 
</script> 

<script> 

Answer 1

Исправлен код:

alert("Here #1"); 
$(document).ready(function() { 
    $("#buttonClick").click(function() { 
    var div = $("#mainBackground"); 
    div.slideUp(400, function() { 
     redirect(); 

    }); 
    }); 
}); 

alert("Here #2"); 

$(document).ready(function() { 
    $("#sign").click(function() { 
    jQuery.ajax({ 
     url: "check_availability.php", 
     data: ['username=' + $("#username").val(), 'password=' + $("#password").val()], 
     type: "POST", 
     success: function(data) { 
     alert("hereagain"); 
     if ($("#username").val() === "") { 
      //Do nothing 
     } else if ($('#username').val().length < 5) { 
      $("#usernameConsole").html("Username must be 5-15 characters"); 
      $("#username").css('backgroundColor', '#ff6666'); 
      $("#usernameAvailable").css('color', '#ff6666'); 
     } else if (data === "accept") { 
      $("#usernameConsole").html("Signed In"); 
      $("#username").css('backgroundColor', '#66cc66'); 
      $("#usernameAvailable").css('color', '#66cc66'); 
     } else { 
      $("#usernameConsole").html("Not accepted"); 
      $("#username").css('backgroundColor', '#ff6666'); 
      $("#usernameAvailable").css('color', '#ff6666'); 
     } 
     }, 
     error: function() {} 
    }); 

    }); 
}); 

Вы проходили данные в ajax функции неправильно.

Edit 1: Предпочтительно, хотя, передавать данные в качестве объекта:

data: {fieldName1: value1, fieldName2: value2} 

Answer 2

В JQuery, вы должны знать, когда DOM готов выполнить любой код, потому что, JQuery идет о DOM манипуляции, и вы не можете манипулировать html-тегами, когда в DOM не существует.

Вы можете использовать:

$(document).ready(function() 
{ 
    // Code... 
}); 

Или

$(function() 
{ 
    // Code... 
}); 

$(document).ready(function() { // This code makes sure to execute Javascript code when the DOM is loaded completely, only once. 
 
    alert("Here #1"); 
 

 
    $("#buttonClick").click(function() { 
 
    var div = $("#mainBackground"); 
 
    div.slideUp(400, function() { 
 
     redirect(); 
 

 
    }); 
 
    }); 
 

 
    alert("Here #2"); 
 

 
    $("#sign").click(function() { 
 
    jQuery.ajax({ 
 
     url: "check_availability.php", 
 
     data: { // Correct 
 
     username: $("#username").val(), 
 
     password: $("#password").val() 
 
     }, 
 
     type: "POST", 
 
     success: function(data) { 
 
     alert("hereagain"); 
 
     if ($("#username").val() === "") { 
 
      //Do nothing 
 
     } else if ($('#username').val().length < 5) { 
 
      $("#usernameConsole").html("Username must be 5-15 characters"); 
 
      $("#username").css('backgroundColor', '#ff6666'); 
 
      $("#usernameAvailable").css('color', '#ff6666'); 
 
     } else if (data === "accept") { 
 
      $("#usernameConsole").html("Signed In"); 
 
      $("#username").css('backgroundColor', '#66cc66'); 
 
      $("#usernameAvailable").css('color', '#66cc66'); 
 
     } else { 
 
      $("#usernameConsole").html("Not accepted"); 
 
      $("#username").css('backgroundColor', '#ff6666'); 
 
      $("#usernameAvailable").css('color', '#ff6666'); 
 
     } 
 
     }, 
 
     error: function() {} 
 
    }); 
 
    }); 
 
});