Почему мой модальный диалог JQuery открывается несколько раз?

Question

Я хочу использовать диалог jQuery, чтобы открыть форму ответа в модальном диалоге.После загрузки страницы в первый раз все нормально, но после этого при каждом нажатии она открывается 2^n-1 раз !!!(n - количество кликов)

примерно так:

щелчок-> диалог открытия (1 раз) -> диалог закрытия

щелчок->Открыть диалоговое окно (2 раза) -> Закрыть диалоговое окно

щелкнуть-> Открыть диалоговое окно (4 раза) -> Закрыть диалоговое окно

Нажмите-> Открыть диалоговое окно (8 раз) -> Закрыть диалоговое окно

это код:

$(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');
    });
};