从 Dialog 内容获取对 Dialog 的引用

Question

这是我的场景：

1. 我在页面 A 上有一个 div。
2. 当一个事件发生时（无论我定义什么，点击等等），我都会执行一个 div.Dialog，设置它的属性并打开它
3. 内部的数据是从异步 .ajax 调用返回的，该调用从 url 获取数据并通过在 .ajax 回调中调用 div.html(data) 将其附加到 div，因此它本质上是通过获取数据（内容）并将其附加到调用对话框（“打开”）的 div...我认为没有什么特别的。

我的问题：在页面 B 中，我如何引用对话框以便对它做一些事情？例如，在我从 .ajax 调用返回并通过 .html(data) 添加到 div 的页面 B 的内容中，有一个按钮，单击时我需要关闭对话框。

现在我的按钮在对话框中不起作用，因为其中一个关闭对话框，另一个应该重定向到新页面，但现在都不起作用，因为我没有参考它所在的对话框来操作它.所以我需要参考，这样我就可以通过一些将驻留在 PageB（数据）中的 jQuery 关闭对话框。

Answer 1

如果页面 B 由 AJAX 加载（而不是 <iframe>），则其中的任何 Javascript 都将在与页面 A 的其余部分相同的上下文中运行。

因此，您可以使用在页面 A 中使用的相同代码来引用页面 B 中的对话框。
请注意，如果页面 B 也在其他地方使用，您需要首先检查您是否真的在页面 A 内运行。 （检查对话框是否存在，或者页面A中设置了一些变量）

---

编辑

如果它在<iframe> 中，您可以使用parent 属性与父框架交互。

具体来说，您可以使用 parent.$ 在父框架的上下文中运行 jQuery 代码。
例如：

parent.$('#someId').dialog(...);

由于这使用了父页面的$ 函数，所以页面B 不需要引用jQuery 或jQuery UI。选择器将在父页面中匹配。

您可以（但不应该）通过编写 parent.$('selector', document) 来针对子页面运行父页面的 jQuery 代码

Answer 2

这应该在成功 ajax 回调中的页面 A 中完成，因为它是页面 A 引用了需要关闭的 div。

A页：

$('div.Dialog').load('/pageB', function(data) {
    $('#closeButtonOnPageB').click(function() {
        // ... close dialog
    });
});