0

这是我的代码：

<script type="text/javascript">
    $(document).ready(function() {
      $('#username').change(check_username);
    });

    function check_username() {
      $("#check_username").html('<img src="images/site/ajax-loader.gif" />username avilable??').delay(5000);
      var usernametotest = $('#username').val();    
      $.post("backend/username_available.php", { username: usernametotest})
       .done(function(data) {
         $("#check_username").replaceWith(data);
       });
    }
</script>

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

这个 JavaScript 被添加到</html>标签之前。

4

3 回答 3

2

您的代码看起来不错 - 请参阅此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吗？检查第一个请求与其余请求的响应，以及差异和因此问题可能会突然出现在您身上。

于 2013-09-15T10:17:46.320 回答
0

每当你替换一个元素......在这里你就这样做......

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

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

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

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

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

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

于 2017-10-03T21:30:58.023 回答
-1

你可以试试这个：

$('#username').on('change', function() {

  // write your code here

});
于 2013-09-15T10:06:58.660 回答