deferring JavaScript execution in document received via AJAX
<p>I'm receiving this HTML document via AJAX:</p>

<pre><code>    &lt;form enctype="multipart/form-data" method="POST" action="admin.php?do=media&amp;action=file-upload"&gt;

    &lt;div id="uploadForm"&gt;

        &lt;div id="fileList"&gt;



        &lt;/div&gt;

        &lt;a href="#" id="selectFile"&gt;[Select File]&lt;/a&gt;
        &lt;a href="#" id="uploadFile"&gt;[Start Upload]&lt;/a&gt;

    &lt;/div&gt;

&lt;/form&gt;

&lt;script type="text/javascript"&gt;
    // $(function(){}); not working when data loaded with ajax request
        var ajaxUpload = new plupload.Uploader({

            runtimes: 'gears, html5, flash',
            url: 'upload.php',
            browse_button: 'selectFile',

        });


        ajaxUpload.bind('Init',function(param){
            console.log(param);
            console.log($('selectFile'));
        });

        $('#uploadFile').click(function(){
            alert('Something');
        });

        ajaxUpload.init();


&lt;/script&gt;
</code></pre>

<p>When I append this to the main document, the JavaScript inside it will immediately run and not be able to find the referenced DOM elements.</p>

<p>It works when I add a time-out on the code, but I would like to know a better way at achieving this.</p>

<p><strong>Update</strong></p>

<p>Modified to reflect the true intent of the question.</p>
