Wie schließe ich einen Dialog mit jQuery?

Ich verwende den folgenden Code, um ein jQuery-UI-Dialog-Widget dynamisch zu erstellen:

 $(function () {
        var Selector = $("a:contains('sometext')");
        $(Selector).bind('click', function () {
            var NewDialog = "<div dir=rtl id='MenuDialog'></div>";
            var DialogContetn = '<div dir=rtl ><table width=100%><tr><td><textarea id="txtRequestContent" cols="30" rows="2"></textarea></td><td><table><tr><td><input id="btnSendEditionRequest" type="button" value="Send" /></td></tr><tr><td><input id="btnCloseDialog" type="button" value="Cancel" /></td></tr></table></td></tr></table></div>';
            $('body').append(NewDialog);
            $('#MenuDialog').html(DialogContetn);
            $('#MenuDialog').hide();
            $('#MenuDialog').dialog({ modal: true, title: "title", show: 'clip', hide: 'clip' });
            $("#btnCloseDialog").live('click', function () {
                $("#MenuDialog").dialog('close');
            });
            return false;
        });
    });

Beim ersten Laden funktioniert der jQuery-Dialog ordnungsgemäß und wenn ich auf btnCloseDialog klicke, wird der jQuery-Dialog erfolgreich geschlossen.

Danach schließt der btnCloseDialog den Dialog jedoch nicht mehr. Warum passiert das?

Aktualisieren

Ich habe meinen Code auf a ausgegeben jsfiddle.

Dies ist ein seltsames Verhalten, da die Schaltfläche den Dialog in jsFiddle ordnungsgemäß schließt, aber nicht den Dialog in meinem Projekt.

Da dies früh bei der Suche nach der Erstellung eines dynamischen Dialogs in jquery auftaucht, möchte ich auf eine bessere Methode hinweisen, um dies zu tun. Anstatt Ihr Dialog-Div und Ihren Inhalt zum HTML hinzuzufügen und es dann aufzurufen, können Sie dies viel einfacher tun, indem Sie das HTML direkt in ein jquery-Objekt schieben, wie folgt:

$(function () {
    $("a:contains('sometext')").click(function() {
        var NewDialog = $('<div id="MenuDialog">\
            <p>This is your dialog content, which can be multiline and dynamic.</p>\
        </div>');
        NewDialog.dialog({
            modal: true,
            title: "title",
            show: 'clip',
            hide: 'clip',
            buttons: [
                {text: "Submit", click: function() {doSomething()}},
                {text: "Cancel", click: function() {$(this).dialog("close")}}
            ]
        });
        return false;
    });
});

Ich habe auch gezeigt, wie Sie mehrere Schaltflächen mit Inline-Funktionen platzieren können, anstatt eine live()-Funktion an die Schaltfläche anzuhängen. Ich habe diese Methode an ein paar Stellen verwendet und sie funktioniert großartig für mich. Es unterstützt auch Formulare (ich habe die Daten in doSomething() geholt und über Ajax übermittelt, aber andere Methoden funktionieren auch) usw.

Sie sollten wahrscheinlich keine IDs für dynamisch erstellte Inhalte verwenden, da Sie am Ende mehr als ein Element mit derselben ID haben könnten – das heißt document.getElementById (wovon ich annehme, dass Sizzle es für die verwendet #id selector) gibt nur den ersten (möglicherweise nicht sichtbaren) zurück.

Ich brauchte eine Möglichkeit, einen JSON-Webservice zu verwenden, um Dinge wie Warnungen und Updates auf der Client-Seite zu steuern, ohne dass der Client eine Aktion initiiert. Ich hoffe, dies aktualisieren zu können, um Web-Sockets zu verwenden, aber im Moment ist es ein zeitgesteuerter Pull und jeder Pull enthält die Verzögerung für den nächsten Pull, sodass ich das sogar verwalten kann, sobald der Client mein System geladen hat.

Ich verwende auch show/expire und moment.js, um nach Datum und Uhrzeit zu filtern, und verwende dann Cookies mit der ID jeder Warnung (hier nicht gezeigt), um doppelte Benachrichtigungen zu verhindern. Das kommt gut voran und ich könnte mich entscheiden, es bald als Bibliothek zu verpacken, wenn ich genug Interesse bekomme.

Das für diese Frage spezifische Bit besteht jedoch aus zwei Teilen. 1) JSON, das die Parameter für jQuery.dialog() und 2) den Code enthält, um diesen JSON zu verwenden und einen Dialog zu erstellen. Der Schlüssel hier ist, darauf zu achten, wie ich auf die ‘n’-Objektparameter verweise und sie verwende, um den Dialog dynamisch zu erstellen. Das tDlg-Objekt spielt dabei eine große Rolle, da es letztlich den Dialog darstellt und an $().dialog() übergeben wird.

JSON-Snippet, das meine Dialogparameter enthält:

"doAlert":{
                "modal":false
                ,"height":240
                ,"width":380
                ,"title":"Welcome to the new BatchManager"
                ,"body":"<div style="text-align:center;">Welcome to the new and enhanced<br/>BatchManager!</div><div style="text-align:center;">Enjoy!</div>"
                ,"buttons":[
                    {
                        "text":"Ok"
                        ,"click":"$(this).dialog('close');"
                    }
                ]
            }

JavaScript-Snippet (mit jQuery) zum Initialisieren eines Dialogs basierend auf meinem JSON (n entspricht doAlert, das in diesem Beispiel Teil eines Arrays von “Notices” ist):

var tDlg = {
    resizable: false,
    height: (n.doAlert.height) ? n.doAlert.height : 240,
    width: (n.doAlert.width) ? n.doAlert.width : 240,
    modal: (n.doAlert.modal) ? n.doAlert.modal : true,
    dialogClass: "dlgFont"
};
if (n.doAlert.buttons) {
    tDlg.buttons = [];
    $.each(n.doAlert.buttons, function (i, n) {
            tDlg.buttons.push({
                            text: n.text,
                            click: new Function(n.click)
                    })
    })
}
$('<div class="dlgFont" title="' + n.doAlert.title + '"><p><span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>' + n.doAlert.body + '</div>').dialog(tDlg);

Ein paar Punkte zum Nachdenken:

1. OnDialogClose du solltest dich lösen #MenuDialog von DOM, um mehrere Objekte mit derselben ID zu vermeiden, oder Sie können prüfen, ob div#MenuDialog existiert, bevor eins hinzugefügt wird.

2. var Selector = $("a:contains('sometext')"); ist eine sinnlose Linie, es sei denn, Sie verwenden sie an anderer Stelle wieder.

3. Sie nutzen $('#MenuDialog') mehrmals. Es wäre besser, es einer Variablen zuzuweisen, anstatt es abzufragen var Selector = $('#MenuDialog'); alles noch einmal.

Mir persönlich ist es so gelungen:

1) Erstellen Sie das HTML des Dialogs mit zwei Spannen mit xxx als Standardwert

<div id="dialog1" title="Title of the dialog">
    <p>There are two variables: <span id="var1">xxx</span> and
    <span id="var2">xxx</span></p>
</div>

2) Bereiten Sie das div für einen Dialog vor

$(function() {
    $( "#dialog1").dialog({
    autoOpen:false,
        modal: true,
        buttons: {
        "Button 1": function() {
            $(this).dialog( "close" );
        },
        "Button 2": function() {
            $(this).dialog( "close" );
        }
    }
    });
});

3) Und ändern Sie den Wert der beiden Spannen mit dieser Funktion, bevor Sie den Dialog starten:

function showDialog(value1,value2){
    $("#var1").html(value1);
    $("#var2").html(value2);
    $( "#dialog1").dialog('open');
} 

4) Wenn Sie es also brauchen, rufen Sie die Funktion auf diese Weise auf

showDialog('tom','jerry'); 

Sie können dies versuchen http://jsfiddle.net/sekmo/L46vb/1/