javascript - 为什么我的模态 jQuery 对话框会打开多次？

Question

我想使用 jQuery 对话框在模态对话框中打开答案表单。加载页面后，第一次，没问题，但之后每次点击都会打开 2^n-1 次!!! (n 是点击次数)

像这样:

click-> open dialog (1 time) -> close dialog

click-> open dialog (2 times) -> close dialog

click-> open dialog (4 times) -> close dialog

click-> open dialog (8 times) -> close dialog

这是代码:

$(function () {
    $('label.answer').click(function (event) { openInDialog(this, event, 'http://localhost/Questions/Answer/2') });
});

function openInDialog(element, event, target) 
{
    event.preventDefault();
    var $loading = $('<img src="../../Others/images/ajaxLoading.gif" alt="loading" class="ui-loading-icon">');
    var $url = target;    
    var $title = "Title"; 
    var $dialog = $('<div></div>');
    $dialog.empty();


    $dialog
            .append($loading)
            .load($url)
            .dialog(
            {
                autoOpen: false
                , title: $title
                , modal: true
                , show: 'fade'
                , hide: 'fade'
            });

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

Answer 1

在函数外初始化对话框。在加载成功之前，您也不应尝试打开对话框。

$(function () {
    $('label.answer').click(function (event) { openInDialog(this, event, 'http://localhost/Questions/Answer/2') });
});
var $dialog = $('<div></div>').dialog(
{
    autoOpen: false
    , modal: true
    , show: 'fade'
    , hide: 'fade'
});

function openInDialog(element, event, target)
{
    event.preventDefault();
    var $loading = $('<img src="../../Others/images/ajaxLoading.gif" alt="loading" class="ui-loading-icon">');
    var $url = target;
    var $title = "Title"; 
    $dialog.empty();
    /* this is incorrect $dialog.dialog({ "option", "title",$title})*/
    $dialog.dialog("option", "title",$title)
    .append($loading)
    .load($url,function(){
        $dialog.dialog('open');
    });
};