2

我有 2 页，比如 page1.html 和 page2.html。

page1.html 有这个代码：

$(document).ready(function() {
                   $('#mydialog').dialog({autoOpen : false, modal : true});
                   $('#myopenlink').click(function() {
                                             $('#mydialog').load('page2.html');
                                             $('#mydialog').dialog('open');
                                             return false;
                                           });                                 
                   });

page1.html 中的相关 HTML 元素： 

<a href="#" id="myopenlink"> Open </a>
<div id="mydialog"> </div>

当我单击“myopenlink”时，我会得到一个显示 page2.html 的模式对话框。

现在，在 page2.html 中，我有另一个链接（或提交按钮等）。我想在单击后关闭对话框（即从它加载的页面中关闭对话框）。

这可能吗？

编辑：

经过一番挖掘，我想我的问题不是专门关于对话框的。这就是我想要做的：

page2.html 内容：

<a href="#" id="mycloselink"> close </a>

page1.html 内容：

function closeLinkClicked(event) {
    event.preventDefault();
    alert('Please Reach this point so I replace this with close dialog');
}

function doneLoading(data) {
    $('#mydiv').on('click', '#mycloselink', closeLinkClicked);
}

$(document).ready(function() {
                             $('#mydiv').load('page2.html', doneLoading);
                            });

page1.html 当然也有这个：

<div id="mydiv"> </div>

当我单击从 page2 加载到 mydiv 的链接时，没有任何反应（我希望显示警报）。

我究竟做错了什么？

谢谢，谢谢

4

2 回答 2

3

嗨，喜欢这个演示 http://jsfiddle.net/mhLc5/6/ 或更新的答案 =>这个http://jsfiddle.net/Pb2eR/ 或 http://jsfiddle.net/Pb2eR/1/

动态追加演示：http: //jsfiddle.net/Pb2eR/13/

所以要关闭对话框，你只需要调用.dialog('close')rest a demo 会给你一个很好的地方玩。

API 位于此处：http: //jqueryui.com/demos/dialog/

好读：http: //forum.jquery.com/topic/close-a-jquery-ui-dialog-from-the-inside

希望这可以帮助！

代码

 buttons: {

            'Submit': function() {
                $Dialog_div.dialog('close');
            }

示例代码的其余部分

变量 $Dialog_div;

function fnOpenDialog() {
    $Dialog_div = $('<div id=\'ThisDialog\'>Hello Page 2</div>').prependTo('body');

    $Dialog_div = $('#ThisDialog').dialog({
        autoOpen: true,
        draggable: true,
        resizable: true,
        title: 'Dialog stack overflow HULK',
        modal: true,
        stack: true,
        height: ($(window).height() * 0.95),
        width: ($(window).width() * 0.9),

        buttons: {

            'Submit': function() {
                $Dialog_div.dialog('close');
            }

        }

    });

}

$('#ClickMe').click(fnOpenDialog);​
于 2012-06-02T13:17:28.683 回答
2

要在事件处理程序中实际关闭对话框，请使用以下命令：

$(this).closest('.ui-dialog-content').dialog('close');

它将遍历 DOM 从新加载的内容备份到原始 div 中，该 div 现在具有包装它的对话框。

我看不出您为实际注册事件而发布的代码有任何明显错误，但据我所知，这里根本不需要使用事件委托。

由于您在完成之前不会执行注册.load，因此您可以直接在#mycloselink.

于 2012-06-02T20:44:55.527 回答