Hi,
I am having a particular issue with the focus/blur events. When I use
the .focus function it will work fine with element that are within the
html scope on load. My problem is with elements that get loaded in
through ajax's request.responseText.
Here is my main HTML:
<html>
<head>
<script type="text/javascript" src="/html/that/js/
jquery-1.2.6.min.js"></script>
<script type="text/javascript">
function test(){
createRequest();
var url = "/win/owa/test"; // this will return only this: <input
type="text">
if (request == null){ document.write("Asynchronous
Request Failed");
}else{
request.open("POST", url, true);
request.onreadystatechange = displayMain;
request.send(null);
}
}
var request = null;
function createRequest() {
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new
ActiveXObject("Microsoft.XMLHTTP");
}catch (failed) {
request = null;
}
}
}
if (request == null){alert("Error creating request object! Your
browser does not support AJAX. Please update it to use this site.")};
}
function displayMain(){
if (request.readyState == 4){
//request.responseText = <input type="text">
//it gets added just fine
document.getElementById("gh").innerHTML = request.responseText;
}
}
$("input").focus(function(){ alert("focus"); });
$("input").blur(function(){ alert("unfocus"); });
</script>
</head><body>
<input type="text" id="text1">
<button onClick=''test();''>test</button>
<div id="gh"><div>
</body>
</html>
In this example the input text1 will always bring up the alerts upon
focus and blur. However once I load the second input box in to the
div, that one won't bring up the alerts for the second input box. I
am guessing jquery looks for all inputs on page load and assigns them
the event and then when the 2nd input box is injected it doesn't have
that same event so it never fires. So maybe the solution is to
reasign it after the new input is injected?
Thanks for all help,
Luis
