大Ajax問題..無法解決

Question

HY，

我使用ajax進行了實時用戶名驗證：

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

除以下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 />但是應用了不同的樣式（background-color和border-color）：如果用戶名已經存在，則為紅色；如果用戶不存在，則為綠色...

問題是腳本只執行一次..僅執行一次.blur() ...

如果我刪除.ajax({ ... etc }); 並插入alert(dataString); 每次我點擊該輸入時，都會觸發alert() ，但.ajax()卻不相同...

似乎是什么問題？ 非常感謝

Answer 1

問題在於，您將在第一個ajax請求返回后替換輸入，因此不再綁定您的blur事件。 嘗試使用委托來綁定事件：

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

當您使用成功函數重新添加html字符串時，您將松開附加到輸入元素的事件處理程序。

也許要根據成功函數的內容嘗試更改輸入的樣式，而不是完全替換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事件綁定消失。

您有兩種選擇：

1. 使用.live()綁定事件，以便它也綁定到將來的匹配元素。 更多信息在這里 。
2. 不要在AJAX資源的響應中替換DOM元素。 只是重新樣式。 （這也將提供更好的性能。）

Answer 5

Java * 腳本 * ...它們是完全不同的東西！ 而且，為什么不返回成功或失敗消息並相應地更新類，而不是返回輸入？ 保存一些DOM調用