模板提交，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等可以正常使用。