jQuery Form: Ajax response is displayed, but does not show up in source code

Question

I use Jquery Form for an Ajax image upload.

My relevant HTML:

<div class="input_con imageupload_con">

    <form action="processupload.php" method="post" enctype="multipart/form-data" id="MyUploadForm">

                <a class="button">BROWSE</a>

                <input name="ImageFile" id="imageInput" type="file" style="display:none" />
                <input type="submit"  id="submit-btn" value="Upload" style="display:none" />

                <img src="assets/img/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>

    </form>

<div id="output"></div>

My relevant JS:

$(document).ready(function() {

                // Simulate a click on the file input button to show the file browser dialog ...
                $('#MyUploadForm .button').click(function() {
                    $('#imageInput').click();
                });
                // ... and after having selected a image, trigger the form action
                $('#imageInput').change(function() {
                    $('#MyUploadForm').submit();
                });

                var options = {
                    target : '#output', // target element(s) to be updated with server response
                    beforeSubmit : beforeSubmit, // pre-submit callback
                    success : afterSuccess, // post-submit callback
                    resetForm : true // reset the form after successful submit
                };

                $('#MyUploadForm').submit(function() {
                    $(this).ajaxSubmit(options);
                    // always return false to prevent standard browser submit and page navigation
                    return false;
                });

                $('.dismiss').click(function(e) {
                                        e.preventDefault(e);
                                        $('#output').empty();
                                        $('#MyUploadForm .button').show();
                });


            }); /* end of document ready */


            function afterSuccess() {
                // ....

            }

            function beforeSubmit() {
                // ...
            }

            //function to format bites bit.ly/19yoIPO
            function bytesToSize(bytes) {
                            // ...
            }

        </script>

The output part of my PHP file "processupload.php":

//...

echo '<img src="uploads/'.$NewImageName.'" alt="Thumbnail" width="100%" height="auto">';
        echo '<a href="#" class="button dismiss">dismiss</a>';
        echo '<input type="hidden" id="path_thumbnail" value="uploads/'.$ThumbPrefix.$NewImageName.'">';
        echo '<input type="hidden" id="path_resizedimage" value="uploads/'.$NewImageName.'">';

//...

What works fine: After having uploaded the image, everything that is stated in the echo part of my PHP file is displayed on the page.

What suprises me: The elements that are echoed DO NOT show up in the source code.

Based on the code given above, can anyone see the reason why the code does not show up in the source code but is displayed?

EDITED:

The reason why I was wondering why the echoed elements do not show up in the source code is that clicking the dismiss-button does not work.

See above:

$('.dismiss').click(function(e) {
                                        e.preventDefault(e);
                                        $('#output').empty();
                                        $('#MyUploadForm .button').show();
                }); 

When I click it, the window scrolls up to the top of the window instead of dismissing the picture....

Answer 1

What is happening (per comments) is that when you initialize the page, there is not yet any object of class "dismiss", so the handler does not get attached.

Then the AJAX injects the button, but at that point it's too late.

You need to use dynamic (delegated) binding:

$('body').on('click', '.dismiss', function(e) {
    ...

so that the BODY receives the click and dispatches it to any new dismiss'es, too.