I think this is a common problem ... but I could not find an answer for this ...
I am loading some text fields into a div inside the page using ajax when clicking a link ...
and during the onFocus event of these newly added page elements, I need to call the javascript function which is on the parent page ...
My problem is that ... these elements ... that is, text fields cannot call functions when the event fires.
I assume that recently loaded items are not updated in the DOM tree of the parent page
I also use jquery, but leave it aside for now, what should I do to make the newly added onFocus elements call the function written on the parent page.?
Here is the code.
<script type = "text/javascript">
$(document).ready(function(){
$('.formContainer input[type=file]').live('change',function(){
alert("hi");
uploadImage();
});
});
</script>
HTML ...
<div class="formContainer">
<form name="frmCreateHotel" action="uploadImage.php" method="post">
<table>
<tr>
<td colspan="2">
<div class="elementRow">
Hotel Image
</div>
</td>
<td>
<div class="elementRow" style="height:100px">
<input name="imageToUpload"
id="imageToUpload"
type="file"
size="30"
class="imageSelector"/> // the function should be called during this elements onchange
<input name="oldImageToDelete"
id="oldImageToDelete"
type="hidden" size="50" />
<input type="hidden" name="MAX_FILE_SIZE"
value="2000000" />
<input name="imageDescription"
id="imageDescription"
type="hidden" />
<div class="toolTip image">
<iframe id="uploadedImage"
name="uploadedImage"
src=""
style="width:160px; height:160px;"
frameborder="0"
marginheight="0"
marginwidth="0"></iframe>
</div>
</div>
</td>
</tr>
</table>
</div>
, ...
, .
....