Question

这是我的代码：

<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检查？文本“用户名已存在”（在变量数据中）不会被“username ok”替换。

此JavaScript在</html>代码之前添加。

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

});

AJAX只调用一次

3 个答案: