DOM 更新后 jQuery-UI 对话框中断答案

【问题标题】：jQuery-UI dialog breaks after DOM updateDOM 更新后 jQuery-UI 对话框中断
【发布时间】：2011-06-19 07:40:17
【问题描述】：

我在模态模式模式下使用 jQuery-UI 对话框在我的页面上显示几个“编辑”表单。

到目前为止，编辑表单已通过 ajax 调用加载到对话框 div 中。所述表格也通过ajax提交。提交 ajax 函数回调另一个函数，该函数使用新编辑的数据更新主页面的 DOM。

我的问题是在任一 DOM 更新后，我失去了对 UI 对话框的引用。那么，问题是我不能再调用对话框上的方法（即“关闭”）。

如果我重新初始化对话框，我会遇到一个问题，即我通过 ajax 提交的表单会多次调用它的所有...就像表单多次绑定到对话框一样。

有没有办法绕过这种行为并在 DOM 更新后保持我对对话框的引用？

这里有一些代码... 初始化文档准备好的对话框...

$('#dialog').dialog({         
   autoOpen: false,         
   modal: true, 
   draggable: false, 
   resizable: false, 
   height: 450,
   width: 550,
 });

按钮点击打开对话框并加载编辑表单...

('#editInfo').live("click", function () {
     $('#dialog').dialog('open')
     $.ajax({
         type: 'GET',
         url: '../info/edit',
         data: {},
         success: function (response) {
             $('#dialog').html(response);//loads the partial edit view into the dialog div...works fine to here.
          }
     });
     return false;
 });

表单提交后，该函数在成功更新 dom 和主页时被调用...

function infoUpdate(response) {
   $('#dialog').dialog('close');
   $('#info').html(response);
 }

在该调用之后，DOM 得到了很好的更新，但对话框确实不关闭...

编辑： 我应该提到我正在使用asp.net MVC 3。加载到对话框中的编辑表单是部分视图，提交后在主页上更新的元素也是部分视图..不确定是否这很重要

编辑 2 找到了解决方案..作为答案发布但有新问题（请参阅下面的答案）

【问题讨论】：

我认为我们需要查看代码 - 至少是初始化对话框和修改 DOM 的部分。
@Jeff Sternal ...确定添加到问题
必须有一个解决方案......现在已经解决了 2 天......
您是否尝试过在 firefox 中使用 firebug 运行它，以便查看 javascript/jquery 是否引发任何错误？
@Simon G 是的，我根本没有收到任何错误......这是令人沮丧的部分

标签： jquery asp.net-mvc ajax jquery-ui dom

【解决方案1】：

我已通过在 ajax 调用的成功函数中初始化模态对话框来解决此问题

('#editInfo').live("click", function () {
   $('#dialog').dialog('open')
   $.ajax({
      type: 'GET',
      url: '../info/edit',
      data: {},
      success: function (response) {
         $('#dialog').html(response);
         $('#dialog').dialog({         
             autoOpen: true,         
             modal: true, 
             draggable: false, 
             resizable: false, 
             height: 450,
             width: 550,
         });

      }
 });
 return false;

});

这允许对话框在提交回调触发时关闭，从而解决了我在问题中提出的问题。但是，我遇到了多次提交表单以及多次打开模式的问题....I.E.每次打开/加载对话框时，都会提交一次表单。尽管我明确地破坏了表单回调中的对话框，但还是会发生这种情况。我可能需要针对这个问题提出一个新问题，除非有人能快速解决...

表单提交回调...

function infoUpdate(response) {
    $('#dialog').dialog('destroy');
    $('#info').html(response);
}

【讨论】：