asp.net-mvc-3 - 表单提交时模态对话框缺少图像，IE9 +

Question

这个问题快把我逼疯了。

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

<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 打开模态：

$('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');
    });

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

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

Answer 1

尝试取消表单提交：

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

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

Answer 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 等可以正常使用。