javascript - Why does my modal jQuery dialog open multiple times? - Stack Overflow

admin管理员组

文章数量:1415467

I want to use jQuery dialog to open answer form in a modal dialog. After loading page, for the first time, it's ok, but after that by each click it will open 2^n-1 times!!! (n is count of clicks)

something like this:

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

this is the code:

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

I want to use jQuery dialog to open answer form in a modal dialog. After loading page, for the first time, it's ok, but after that by each click it will open 2^n-1 times!!! (n is count of clicks)

something like this:

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

this is the code:

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

• javascript
• jquery
• jquery-ui

Share Improve this question Follow edited Dec 10, 2011 at 5:55 Marcus Adams 54k99 gold badges9797 silver badges145145 bronze badges asked May 25, 2011 at 9:15 AlirezaAlireza 14211 gold badge44 silver badges1313 bronze badges 3

• var $dialog = $('<div></div>'); doesn't look fishy to you? ;) – Michael J.V. Commented May 25, 2011 at 9:20
• @Alireza: Colleague, not college (sue me for a spelling error). m-w.info/dictionary/colleague I'm just giving you an opinion, based on having participated here a lot, that that level of slang is inappropriate and disrespectful. – T.J. Crowder Commented May 25, 2011 at 12:17
• @T.J. Crowder - Thank you, I wont use slang anymore. – Alireza Commented May 25, 2011 at 13:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

initialize the dialog outside of the function. You should also not try to open the dialog until the success of the load.

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

本文标签： javascriptWhy does my modal jQuery dialog open multiple timesStack Overflow