File Input with a floating div not working

Question

I have a div that I am floating as a dialog over my page. When I use try and use the , the file selector does not get shown. Any help would be appreciated.

The function to create the floating div looks like

function openFloat($html)
{
    $floatDiv = $('<div id="mainFloater" class="floater" ></div>');
    $center = $('<div id="floaterCenter" class="floater" align="center"></div>');
    $fieldset = $('<fieldset id="floaterFieldset" align="left" id="floaterFieldset"></fieldset>');
    $fieldset.append($html);
    $floatDiv.append($center);

    $center.append($fieldset);
    $('body').append($floatDiv);
}
openFloat($('<input type="file" name="file">'))

Answer 1

I found the problem. I had some click handlers. A click on the mainFloater would hide everything. A click on the floaterFieldset would cancel the click (so it would not hide). However the cancel click also canceled the clicks for all buttons.

Answer 2

If I use the script at onload it does work.

<script type="text/javascript">
function openFloat($html)
{
    $floatDiv = $('<div id="mainFloater" class="floater" ></div>');
    $center = $('<div id="floaterCenter" class="floater" align="center"></div>');
    $fieldset = $('<fieldset id="floaterFieldset" align="left" id="floaterFieldset"></fieldset>');
    $fieldset.append($html);
    $floatDiv.append($center);

    $center.append($fieldset);
    $('body').append($floatDiv);
}
$(document).ready(function(){
    openFloat($('<input type="file" name="file">'));
});
</script>