Question

Hy，

我使用ajax进行实时用户名验证：

<td id="user_process_live"><input type="text" id="user_live_ver" name="user" /></td>

abnd以下java：

  $("input#user_live_ver").blur(function() {
    var username=$(this).val();
    var dataString = 'username=' + username;
    $.ajax({
        type: "POST",
        url: "ajax/login_ajax.php",
        data: dataString,
        cache: false,
        success: function(html) {
           $("td#user_process_live").html(html); 
        }

        });
    });

login_ajax.php返回相同的<input type=text id=user_live_ver name=user />，但应用了不同的样式（背景颜色和边框颜色）：如果用户名已经存在则为红色，如果用户不存在则为绿色...

问题是脚本只执行一次..只有一个.blur() ...

如果我每次点击该输入时移除.ajax({ ... etc });并插入alert(dataString);，alert()会被触发，但.ajax()不会相同...

似乎有什么问题？非常感谢

Answer 1

问题是您在第一个ajax请求返回后正在替换输入，因此您的模糊事件不再受限制。尝试使用delegate绑定您的活动：

var process_live = $("#user_process_live");
process_live.delegate("#user_live_ver", "blur", function() {
    var username = $(this).val(),
        dataString = {'username': username};
    $.ajax({
        type: "POST",
        url: "ajax/login_ajax.php",
        data: dataString,
        cache: false,
        success: function(html) {
           process_live.html(html); 
        }
    });
});

Answer 2

使用success函数重新添加html字符串时，会松开附加到input元素的事件处理程序。

也许尝试根据您在成功函数中返回的内容更改输入的样式，而不是完全替换HTML。

success: function(result) {
   if (result) {
     $("input#user_live_ver").addClass("valid");
   } else {
     $("input#user_live_ver").addClass("invalid");
   } 
}

如果用户名有效，您现在要做的所有PHP脚本都返回true，如果没有，则返回false。

使用json_encode($result)

Answer 3

也许html替换后模糊事件的引用丢失了，我没试过，所以我不知道。

但您是否尝试再次设置模糊事件？

Answer 4

这可能正在发生，因为您正在删除$("input#user_live_ver")引用的元素，然后向DOM添加一个新元素，以便blur事件绑定消失。

您有两种选择：

使用.live()绑定事件，以便它也绑定到将来的匹配元素。更多信息here。
不要从AJAX资源中替换响应中的DOM元素。只是重新设计它。（这也会提供稍好的性能。）

Answer 5

java * SCRIPT * ......它们是非常不同的东西！并且，为什么不返回成功或失败消息并相应地更新类，而不是返回输入？保存一些DOM调用

很大的Ajax问题..无法搞清楚

5 个答案: