表单提交时模态对话框缺少图像，IE9 +答案

【问题标题】：Modal dialog missing image on form submit, IE9+表单提交时模态对话框缺少图像，IE9 +
【发布时间】：2023-03-05 19:09:01
【问题描述】：

这个问题快把我逼疯了。

所以我有一个模态对话框。

<div class="modal">
    <img src="...."/>
</div>

实例化如下：

$(".modal").dialog({
        resizable: false,
        draggable: false,
        modal: true,
        autoOpen: false,
        width: 530,
        height: 460,
        closeOnEscape: false,
        dialogClass: 'popup noTitle'
    });

然后我有一个表格：

<form>

    <input type="submit"/>
</form>

和js打开modal：

$('form input').click(function() {
    $(".modal").dialog('open');
});

在大多数浏览器中效果很好：

在 IE 9 和 IE 10 中。模式已打开，但 图像丢失：

我相信这与表单提交有关，阻止图像加载。如果我从控制台运行$(".modal").dialog('open');，它工作正常。我已经尝试过预加载图片：

$("#divSearching img").each(function() {
        var imgObj = new Image();
        imgObj.src = $(this).attr('src');
    });

没有帮助。还有其他人对此有疑问或有好的解决方案吗？我尝试过的一切都失败了。

试图创建一个小提琴，但因为它与表单提交有关，我无法做到。

【问题讨论】：

标签： asp.net-mvc-3 jquery-ui internet-explorer-9

【解决方案1】：

尝试取消表单提交：

$('form input').click(function() {
    $(".modal").dialog('open');
    return false;
});

现在您有一个带有提交按钮的表单，当有人单击提交按钮时，该表单会被发送到服务器，并且浏览器会重定向到其当前位置。您不能期望更多的 javascript 在该阶段继续执行。通过从提交处理程序返回 false，您将取消默认操作。

【讨论】：

是的，这将显示我的弹出窗口，但是表单没有提交？我需要显示弹出窗口然后提交表单。
但这根本没有意义。如果您使用普通 POST 提交表单，浏览器会重定向，并且您可以忘记在该阶段之后执行任何 javascript。您将展示哪些图像？你将在哪里展示它们——记住一旦浏览器离开页面，DOM 就会随之消失？另一方面，如果您使用 AJAX 提交表单，那么这是一个完全不同的故事。在这种情况下，您可以使用 AJAX 提交表单并继续执行其他脚本（因为浏览器不会重定向离开页面）。
我想我希望它在提交表单之前完成它执行 js。这似乎在其他所有浏览器和旧版本的 IE 上都是如此。反正现在有了解决办法。谢谢。

【解决方案2】：

想出了一个解决办法。所以我改变了：

$('form input').click(function() {
    $(".modal").dialog('open');
});

收件人：

$('form input').click(function(e) {
        var $form = $(this).parents('form');
        $(".modal").on('dialogopen', function() {$form.submit();});
        $(".modal").dialog('open');
        e.preventDefault();
    });

这会推迟表单提交，直到打开对话框的 js 完成。就像我说的。似乎只是 IE9 和 IE10 的问题。 FireFox、Chrome 等可以正常使用。

【讨论】：