Question

我有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>

当我点击从第2页加载到mydiv的链接时，没有任何反应（我希望警告显示）。

我做错了什么？

由于感谢

Answer 1

Hiya喜欢这个演示 http://jsfiddle.net/mhLc5/6/ 或更新的答案=＆gt; 此http://jsfiddle.net/Pb2eR/ 或 {{3} }

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

所以要关闭你只需要拨打.dialog('close')的对话框，休息一个演示会给你一个好玩的地方。

API位于此处：http://jsfiddle.net/Pb2eR/13/

好读：http://jqueryui.com/demos/dialog/

希望这有帮助！

<强>码

 buttons: {

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

其他示例代码

var $ 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);

Answer 2

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

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

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

我无法看到您为实际注册事件而发布的代码有任何明显错误，但据我所知，此处根本不需要使用事件委派。

由于您在.load完成之后才进行注册，因此您可以在#mycloselink上直接注册事件处理程序。

从内部关闭Jquery UI对话框

2 个答案: