Question

我使用Jquery Form进行Ajax图像上传。

我的相关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>

我的相关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>

我的PHP文件的输出部分＆＃34; processupload.php＆＃34;：

//...

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.'">';

//...

什么工作正常：上传图片后，我的PHP文件的echo部分中陈述的所有内容都会显示在页面上。

让我感到惊讶的是：回声的元素不会出现在源代码中。

根据上面给出的代码，任何人都可以看到代码没有显示在源代码中但显示的原因吗？

编辑：

我之所以想知道为什么回声元素没有出现在源代码中，是因为单击dismiss-button不起作用。

见上文：

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

当我点击它时，窗口会向上滚动到窗口的顶部，而不是取消图片....

Answer 1

正在发生的事情（每条评论）是，当你初始化页面时，还没有任何类的对象＆＃34;解雇＆＃34;，因此处理程序没有附加。

然后AJAX注入了按钮，但此时为时已晚。

您需要使用dynamic (delegated) binding：

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

以便BODY收到点击并将其发送给任何新的解雇。

jQuery Form：显示Ajax响应，但不会显示在源代码中

1 个答案: