jQuery UI对话框 - 关闭事件的问题

时间:2009-05-14 21:45:51

标签: jquery-ui jquery-ui-dialog

我正在尝试在关闭jQuery UI对话框时执行特定操作。这是我的代码的简化版本:

$('a.open-trigger').click(function(){
    var test = 'hello';

    $('#dialog').dialog({
        bgiframe: true,
        dialogClass: 'change', 
        resizable: false,
        draggable: false,
        modal: true,
        height: 334, 
        width: 450,
        autoOpen: false,
        show: 'fade'
    });

    $('#dialog').dialog('open');

    $('a.close-trigger').click(function(){
        alert(test);
        $('#dialog').dialog('close');
    });
});

我第一次关闭对话框时,会收到带有“hello”字样的预期警报。如果我第二次打开对话框并关闭它,我会收到两次“你好”警告。如果我第三次打开和关闭它,我会收到三个警报,依此类推。

为什么这些警报会自行复制?无论我打开/关闭对话框多少次,我都希望警报只在关闭时显示一次。

谢谢! 西蒙

3 个答案:

答案 0 :(得分:8)

每次拨打.click时,您都会附加其他事件处理程序。这就是重复的原因。

$('a.close-trigger').click(function(){
                    alert(test);
                    $('#dialog').dialog('close');
            });

将该代码拉出到与其他事件绑定相同的级别,它应该按预期工作。

答案 1 :(得分:0)

您已将一个函数绑定到open按钮,每次触发open事件时都会向关闭按钮添加一个事件处理程序。您应该在'a.open-trigger'事件函数之外的某处添加close事件处理程序...

$('a.open-trigger').click(function(){
        var test = 'hello';

        $('#dialog').dialog({bgiframe: true, dialogClass: 'change', resizable: false, draggable: false, modal: true, height: 334, width: 450, autoOpen: false, show: 'fade'});
        $('#dialog').dialog('open');
});

$('a.close-trigger').click(function(){
        alert(test);
        $('#dialog').dialog('close');
});

答案 2 :(得分:0)

您需要从打开的单击事件处理程序

中取出关闭单击事件处理程序
$(function() {
    $('#dialog').dialog({bgiframe: true, dialogClass: 'change', resizable: false, draggable: false, modal: true, height: 334, width: 450, autoOpen: false, show: 'fade'});

    $('a.open-trigger').click(function(){    
        $('#dialog').dialog('open');
    });


    $('a.close-trigger').click(function(){
        alert("hello");
        var myDialog = $('#dialog');
        if (myDialog.dialog('isOpen'))
            myDialog.dialog('close');
    });
});