Question

我有一个我用过的旧脚本。我不是一个jquery类型的人，我很难让脚本工作。

我正在使用jquery 3.2.1，但我只能使用jquery 1.11.1来实现这一点我不确定我在寻找什么或是什么导致了这个问题。

脚本位于http://www.2my4edge.com/2013/07/username-live-availability-check-using.html

此问题代码

$(document).ready(function(){

$("#username").change(function(){

var username = $("#username").val();
var msgbox = $("#status");

if(username.length > 4){

$("#status").html('<img src="loader.gif" align="absmiddle"> Checking availability...');

$.ajax({  
    type: "POST",  
    url: "ajax.php",  
    data: "username="+ username,  
    success: function(msg){  
   $("#status").ajaxComplete(function(event, request){
    if(msg == 'OK')    {

        $("#username").removeClass("red");
        $("#username").addClass("green");
        msgbox.html('<img src="available.png" align="absmiddle">');

    } else  {

         $("#username").removeClass("green");
         $("#username").addClass("red");
        msgbox.html(msg);
    }  

   });
   }

 });

} else {
$("#username").addClass("red");
$("#status").html('<font color="#cc0000">Please enter atleast 5 letters</font>');
}
return false;
});

});

Answer 1

尝试以下版本适用于版本3

$(function() {    

$("#username").keyup(function(){

var username = $("#username").val();
var msgbox = $("#status");

if(username.length > 3){

$("#status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');

$.ajax({  
    type: "POST",  
    url: "ajax.php",  
    data: "username="+ username,  
    success: function(msg){  

    if(msg == 'OK') { 

        $("#username").removeClass("red");
        $("#username").addClass("green");
        msgbox.html('<img src="available.png" align="absmiddle">');

    } else  { 

         $("#username").removeClass("green");
         $("#username").addClass("red");
        msgbox.html(msg);
    }  

   } 

 }); 

} else {

$("#username").addClass("red");
$("#status").html('<font color="#cc0000">Please enter atleast 5 letters</font>');
}
return false;
});

});

Answer 2

Yoy在成功回调函数中使用ajaxComplete，这没有任何意义，因为成功回调将在ajax结束时触发。另外，根据http://plnkr.co/edit/tu561CX0n1I9f53iVv12：

从jQuery 1.9开始，jQuery全局Ajax事件的所有处理程序， 包括那些添加了.ajaxComplete（）方法的必须附在文件上。

尝试删除该行：

$("#status").ajaxComplete(function(event, request){

及其右括号和括号：

});

此外，jQuery 3中不推荐使用$(document).ready(function(){。将其替换为$(function() {

Jquery更新1-3代码问题

2 个答案: