AJAX只调用一次

这是我的代码：

 $(document).ready(function() { $('#username').change(check_username); }); function check_username() { $("#check_username").html('username avilable??').delay(5000); var usernametotest = $('#username').val(); $.post("backend/username_available.php", { username: usernametotest}) .done(function(data) { $("#check_username").replaceWith(data); }); }  

我使用此代码检查AJACX表单中用户名的可用性。 它完美但只有一次。 当用户名被占用并且我更改了用户名时，在第一个用户名之后没有进行AJAX检查？ 文本“用户名已存在”（在变量数据中）不会被“username ok”替换。

此JavaScript在标记之前添加。

Answer 1

您的代码看起来很好 – 请参阅此jsfiddle ，并在usernametotest值上发出警报以获得更多可见性

 $(document).ready(function() { $('#username').change(check_username); }); function check_username(){ $("#check_username").html('username avilable??').delay(5000); var usernametotest = $('#username').val(); alert('posting username ' + usernametotest); $.post("backend/username_available.php", { username: usernametotest} ) .done(function(data) { $("#check_username").replaceWith( data ); }); } 

每次都使用正确的有效负载进行发布请求，因此没有问题（请查看浏览器开发人员工具，例如Chrome中的网络选项卡/ XHR）

从backend/username_available.php返回的响应必须是一个问题吗？ 检查第一个请求与其余请求的响应，差异，因此问题可能会跳出来。

Answer 2

每当你更换一个元素 ……在这里你就是这样做的……

 $("#check_username").replaceWith( data ); 

所有这些元素的处理程序都丢失了 。 所以change()不再有效。 为了能够再次使用它，您只需要在重写后再次绑定元素：

 $('#username').change(check_username); 

或者将处理程序绑定到父级并委托它：

 $('#username').parent().on('click', '#username', check_username); 

（我觉得类选择器会更好用 – 我称之为迷信）

Answer 3

你可以试试这个：

 $('#username').on('change', function() { // write your code here });