[英]jQuery Form: Ajax response is displayed, but does not show up in source code
我将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文件“ 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.'">';
//...
效果很好:上传图像后,页面上将显示PHP文件的echo部分中所述的所有内容。
让我惊讶的是:回显的元素不会显示在源代码中。
根据上面给出的代码,没有人能看到代码没有显示在源代码中却被显示的原因吗?
编辑:
我想知道为什么在源代码中没有显示回显的元素的原因是单击dismiss按钮不起作用。
往上看:
$('.dismiss').click(function(e) {
e.preventDefault(e);
$('#output').empty();
$('#MyUploadForm .button').show();
});
当我单击它时,窗口会向上滚动到窗口顶部,而不是关闭图片。
发生的事情(按注释)是,当您初始化页面时,尚没有任何类“ dismiss”的对象,因此处理程序未附加 。
然后,AJAX注入按钮,但是那时为时已晚。
您需要使用动态(委托)绑定 :
$('body').on('click', '.dismiss', function(e) {
...
这样BODY就会收到点击并将其分配给任何新的解雇对象。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.