Question

我有一个包含表单的jQuery UI对话框，允许用户发布广告。由于表单包含文件上传，因此表单的目标是iFrame。

从这个iFrame中，我在父窗口中销毁对话框并创建一个新对话框（或者我更改了原始对话框的选项，它没有任何区别）。关键是，从iFrame中，我为新对话框定义了新的按钮，这些按钮本身附加到主窗口元素上的事件。

在Firefox，Safari，Chrome中，这非常有效：

var p = parent;    

p.$('#dialog_new_ad').html('<form id="post_ad_form" style="display: none" data-remote="true"></form><div class="header"><h1 class="header_title"></h1><div class="header_company"></div><div class="header_location"></div></div><div class="content"></div>');

p.$('#dialog_new_ad').dialog({
 minHeight: 600,
 width: 800,
 position: ['center',25],
 modal: true,
 autoOpen: false,
 title: '<%= 'Preview: ' if params[:action] == 'preview' %><%= @ad.title %>',
 buttons: {
  "« Back": function() {
   p.$('#post_ad_form').attr('method','get');
   p.$('#post_ad_form').attr('action','/ads/<%= @ad.id %>/revise');
   p.$('#post_ad_form').submit();
  },
  "Submit »": function() {
   p.$('#post_ad_form').attr('method','post');
   p.$('#post_ad_form').html('<input type="hidden" name="_method" value="put">');
   p.$('#post_ad_form').attr('action',"/ads/<%= @ad.id %>/confirm");
   p.$('#post_ad_form').submit();
  }
 }
});

此代码位于表格POST到的iFrame中。

如果查看按钮功能，您将看到他们正在做的事情也在子窗口（iFrame）的上下文中定义，即使这些按钮位于父窗口中。这是因为函数是在iFrame中创建的，因此必须从该上下文中引用对象。

现在的问题是，在Internet Explorer中，它有时会起作用，但不会起作用。如果没有，我得到的错误是“无法在释放的脚本中执行代码”，它指向jquery-ui.js中定义按钮功能的部分。是否发生错误只是随机的。好像它取决于在调用代码之前是否已经完成某些事情。如上所述，在任何其他浏览器中它始终有效。

整个事物（在iFrame中）都包含在$(function() { [...] }中，因此加载的DOM不是问题。它可能与以下事实有关：.html调用创建的表单在定义按钮函数时没有“完成放入DOM”，但这对我来说似乎很奇怪。有什么想法吗？

注意： jQuery .html函数使用innerHTML创建新元素。如果此后直接引用元素，是否可能导致IE中出现任何问题？

更新：我放弃并简单地将虚拟表单放在父元素中，因此它可以由不同类型的子元素iFrame使用，无论它们是否实际加载。当表单是父HTML的静态部分而不是动态插入时，一切正常。我仍然不明白为什么动态插入在IE中不起作用。

jQuery UI Dialog IE8问题

0 个答案: