Question

Hy,

I have a live username validation using ajax :

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

abnd the following 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); 
        }

        });
    });

The login_ajax.php returns the same <input type=text id=user_live_ver name=user /> but with different styles applied (background-color and border-color) : red if username already exist and green if user does not exist …

The problem is the script does this just one time .. just one .blur() …

If i remove the .ajax({ ... etc }); and insert alert(dataString); every time i click out that input the alert() is triggered but not the same for the .ajax() …

What seems to be the problem ? Thanks a lot

Answer 1

The problem is that you are replacing the input after the first ajax request returns so your blur event isn’t bound anymore. Try using delegate to bind your event:

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); 
        }
    });
});