JQuery UI Dialog dialog.('close');不工作

Question

我有一个包含多个模态 jQuery UI 对话框的页面，我正在尝试在一个对话框（常见问题解答）上创建一个链接，该链接将关闭该对话框并打开另一个对话框（保修）。下面是相关代码：

var $faqIframe = $('<iframe />', {
                name: 'myFrame',
                id:   'myFrame',
                src: "modal_faq.html",
                width:"100%",
                height:"100%",
                align:"left",
                scrolling:"auto",
                frameborder:"0"
            }); 

var $warrantiesIframe = $('<iframe />', {
                name: 'myFrame1',
                id:   'myFrame1',
                src: "modal_warranties.html",
                width:"100%",
                height:"100%",
                align:"left",
                scrolling:"auto",
                frameborder:"0"
            });

然后，打开 faq iFrame

$(function(){
    $('#faqDialog').dialog({
        autoOpen: false,
        width: 780,
        height: 460,
        modal: true
    });

    $('#faqDialog').append($faqIframe.clone());

    // Dialog Link
    $('#faq_link, #faq_link1').click(function(){
        $('#faqDialog').dialog('open');


        return false;
    });

这工作正常，按预期打开对话框。我也有类似的保修对话框代码。这是当前不起作用的代码。 #warranty_link2 是常见问题对话框上的一个链接，单击该链接时，我想触发关闭常见问题对话框。

    $('#warranty_link2').on("click", function(event){
        $('#faqDialog').dialog('close');
    });
}

我试过了

$('#faqDialog').dialog('close');
$('#faqDialog').dialog('hide');
$('#faqDialog').dialog('destroy');

我也尝试过使用“live”而不是“on”，但也没有使用这两者中的任何一个 还尝试使用 var $faqIframe 引用它，如

$faqIframe.dialog('close') 

没有结果。

我知道 click 事件正在触发，因为我输入了一个有效的 console.log。

我做错了什么，如何关闭此对话框？

在http://www.solarkit2go.com 上查看它的实际效果 - 点击常见问题链接

Answer 1

您必须在触发对话框后绑定 onclick 事件。见下文

$(function(){
   $('#faqDialog').dialog({
    autoOpen: false,
    width: 780,
    height: 460,
    modal: true
});

$('#faqDialog').append($faqIframe.clone());

// Dialog Link
$('#faq_link, #faq_link1').click(function(){
    $('#faqDialog').dialog('open');

    $('#warranty_link2').click(function(event){
        $('#faqDialog').dialog('close');
    });

    return false;
});