onblur event doesn't work if user enter value in textfield and directly press browser refresh button?

Question

i have ajax generated input field

<input type="text" value="naeem" onblur="updateAttendee(1)" id="first_name_1" name="first_name_1" placeholder="First Name">

onblur works fine when user input data and click anywhere outside the input field, but it doesn't work if user enter value and directly press browser refresh button

my updateAttendee() function:

function updateAttendee(attendee_id) {

    var first_name  = $("#first_name_"+attendee_id).val();
    var last_name       = $("#last_name_"+attendee_id).val();
    var email           = $("#email_"+attendee_id).val();



     $.ajax({
              type: "POST",
              data: "attendee_id="+attendee_id+"&first_name="+first_name+"&last_name="+last_name+"&email="+email,
              url: "<?php echo $registry->getObject('url')->getEventUrl();?>index.php?mod=eventsiteAjax&func=ajaxUpdateAttendee",
              dataType: 'json',
              success: function(data) {

                if(data['status'] == '1') {

                        $("#div_attendees").append(data['attendee_box']);
                  //success 
                } else {
                    // alert(data['error']);

                }


              }
        });
}

Answer 1

First maintain one flag for input focus and blur

$("#first_name_1").focus(function() {
    $(this).data('flag', 1);
});

$("#first_name_1").blur(function() {
    $(this).data('flag', 0);
});

Then, manually trigger blur event for input box on window unload if blur was not already triggered after focusing.

$( window ).bind("beforeunload", function() {
    if($("#first_name_1").data('flag') == 1){
        $("#first_name_1").trigger('blur');
    }
});