Question

I’m receiving this HTML document via AJAX:

    <form enctype="multipart/form-data" method="POST" action="admin.php?do=media&action=file-upload">

    <div id="uploadForm">

        <div id="fileList">



        </div>

        <a href="#" id="selectFile">[Select File]</a>
        <a href="#" id="uploadFile">[Start Upload]</a>

    </div>

</form>

<script type="text/javascript">
    // $(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();


</script>

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.

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

Update

Modified to reflect the true intent of the question.

Answer 1

This is not possible in the manner which you’ve described, because the JavaScript is not bound to a condition to run, so it runs immediately.

The code inside the document you’re receiving via AJAX should be wrapped inside a function by providing side:

function onDocumentReady()
{
    // your code here
}

Then from the loading code:

// get the HTML and JavaScript in data
$('#container').append($(data));
// fire the function to let JavaScript run
onDocumentReady();

If you have multiple requests, the providing side should make the onDocumentReady function unique by adding random alphabets to the function name, e.g. onDocumentReady_123()