Question

我有使用AJAX调用Page B的Page A.页面B将放在页面A的div容器中。在结果（页面B）中，有一个代码将启动jQuery UI对话框。对话框的div也在页面B中。但是，它不起作用。我必须将启动代码放在页面A中。因此，如果我想将启动代码放在页面B中，我该怎么办？

启动代码：


$('#dialog').dialog({
    bgiframe: true,
    autoOpen: false,
    width: 300,
    height: 300,
    modal: true,
    resizable: false,        
    buttons: {
        'Create an account': function() { },
         Cancel: function() { }
    },
    close: function() { }
});

我也尝试使用$('div.dialog')作为选择器（将id更改为类）并且它确实有效，但每次我请求页面B（不重新加载页面A）时，对话框将成倍增加。例如，我第一次请求页面B时，将打开一个对话框。我第二次请求页面B时，将打开两个对话框。

Answer 1

你的方法并不遥远，你只是在每次加载时复制通话中的对话，所以destroy the previous one，所以代替这个：

$('div.dialog').dialog({ ...options... });

请致电：

$('div.dialog').dialog('destroy').dialog({ ...options... });

这可以防止为同一元素实例化多个对话框。或者，您可以检查是否已在该元素上创建对话框，如下所示：

$('div.dialog').filter(function() {
  return $(this).closest('.ui-dialog').length === 0;
}).dialog({ ...options... });

这仅在尚未包含在对话框中的<div class="dialog">元素上创建对话框。

Answer 2

您可以使用自定义事件绑定的jQuery live函数执行此操作。每次调用Page B时，都必须触发自定义事件，以便可以在事件处理程序中绑定新的对话框元素。如果您遵循此方法，启动代码必须仍然在页面A中。

从AJAX调用的结果启动jQuery UI Dialog

2 个答案: