Question

我在Django应用程序中有一个工作进度条。除了在Safari中，酒吧只在奇怪的情况下出现。

首先，我通过jquery / ajax组合附加了进度条：

var $progress = $('<div id="upload-progress" class="upload-progress"></div>')
.appendTo($('#webfileuploadform'))
.append('
    <div class="progress-container">
        <div class="progress-info">uploading 0%</div>
        <div class="progress-bar"></div>
    </div>');

//This is all one string, I've just broken it up like this so it's readable.

//Called on form submit
$.ajax({
    ...yada yada...
    success: function(data){
        $progress.show(); <-- shows the div(s)
        ...more yada...

在Firefox和Chrome中，这一切都运行正常。在Safari中，这实际上也是有效的，只是不显示。当我打开Safari开发人员工具并向下钻取到<form>时，我可以看到DOM元素正在按原样附加到表单上。进度条的宽度和progress-info div的文本也正确更新（在开发人员工具中）。问题是#upload-progress div没有显示在浏览器中，即使我看到它存在于开发人员工具中！

让我感到震惊的是，如果我点击Safari中的灰色'x'强制停止页面，则会显示进度条！

另一个奇怪的事情是，一旦我点击表单提交，如果我在我的开发人员工具中突出显示任何dom元素，整个页面就会被整个页面上的包装div上的相同颜色消隐！此外，如果我在单击提交按钮之前突出显示开发人员工具中的元素，然后单击，页面将直接跳转到再次消隐。我甚至不需要在开发人员工具中移动。

非常奇怪的行为。我不知道发生了什么......

我已经读过一些事情，说当使用jquery应用css时，safari不会重绘DOM？我不认为这是真的，但这与它有关吗？

更新

因此，即使在ajax函数之外，此问题仍然存在，但在提交处理程序之外仍然有效。那就是：

单击提交按钮时

问题仍然存在（此处没有ajax代码）

$('#webfileuploadform').submit(function(){
    $('#webfileuploadform').append('<div id="upload-progress" class="upload-progress">asdf</div>');
    $('#upload-progress').append('<div class="progress-container"><div class="progress-info">uploading 0%</div><div class="progress-bar"></div></div>');
    ...
});

提交处理程序之外的相同代码

$('#webfileuploadform').append('<div id="upload-progress" class="upload-progress">asdf</div>');
$('#upload-progress').append('<div class="progress-container"><div class="progress-info">uploading 0%</div><div class="progress-bar"></div></div>');
$('#webfileuploadform').submit(function(){
    ...
});

Answer 1

这是webkit的一个问题。 bug report is here。{{3}}。表单提交后，Webkit无法处理XMLHttpRequests。我使用的解决方法是将表单提交到目标iframe。只有当目标与document所在的form相同时才会发生错误...

更改了目标：

<form action="my_django_view" method="post" enctype="multipart/form-data" id="formID" target="theIframeName">
    ...
</form>

页面上隐藏的iframe：

<iframe name="theIFrameName" id="style-me-with-display-none"></iframe>

虽然应该注意我在这里使用遗留代码，这就是我使用表单处理文件对象的原因。如果你从头开始，现在有更好的方法来处理文件对象，应该避免使用这种方法。

jquery追加没有在safari中显示

更新

1 个答案: