Fire function on ReadyState - XMLHttpRequest - php

Question

Learning AJAX.
I have the following AJAX script, i am using it primarily for navigation (backend php):
function ajaxFunction(linked) {
var ajaxRequest;
var loading = $('#loading');
if(loading.length > 0) {
loading.css('display', 'block');
}
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data
// sent from the server and will update
// div section in the same page.
ajaxRequest.onreadystatechange = function() { **//READY STATE HERE!**
if(ajaxRequest.readyState == 4) {
var ajaxDisplay = $('#wrapper');
loading.css('display', 'none');
ajaxDisplay.html(ajaxRequest.responseText);
if($('#search_field').length > 0) {
$('#search_field').focus();
}
if($('#year').length > 0) {
$('html').scrollTo('#year');
}
startValidation(); **// VALIDATION FUNCTION HERE!**
}
}
// Now get the value from user and pass it to
// server script.
if(linked == 'addNewPage' || linked == 'add') {
var queryString = "?page=add";
queryString += "&action=customer&add=new&ajax=ajaxRequest";
} else if(){} etc...
I have downloaded the h5validate plugin to take advantage of the HTML5 validation i already have in place, the problem is when i load the content through AJAX any .ready functions get unbound from the DOM and don't work. I have tried calling the function after ReadyState==4 but it still won't launch. The function works if i navigate to it directly (without AJAX) and use:
window.onload = startValidation();
Validate trigger:
function startValidation() {
$('.row').h5Validate({
errorClass:'red'
});
}
Where am i going wrong here?