jQuery UI Dialog funktioniert nur beim ersten Aufruf

Question

Ich habe ein einfaches HTML-Codefragment

<div style="display:none;" id="link_to_list"></div>
 <a href="#" onclick="save_onclick()">
     Back to List
 </a>

Und eine einfache Jquery-Funktion für das Anklicken.

function save_onclick() {
    $( "#link_to_list" ).dialog({
        title:'Are you sure you don\'t want to save?',
        resizable: false,
        height:140,

        modal: true,
        buttons: {
            Ok: function() {
                window.location.href = "findUsers";
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });
}

Wenn ich zuerst klicke, funktioniert es, aber div "link_to_list" löschen und ich kann es nicht wieder aufrufen. Wie kann ich das umgehen?

Answer 1

I denken Das Problem könnte sein, dass Sie beim zweiten Klick versuchen würden, das Dialogfeld neu zu initialisieren, was (wenn ich mich richtig erinnere) nicht funktioniert. Stattdessen könnten Sie den Dialog zuerst einrichten und dann haben die Klick-Handler nur den Dialog öffnen.

$( "#link_to_list" ).dialog({
    title:'Are you sure you don\'t want to save?',
    resizable: false,
    height:140,
    autoOpen: false,

    modal: true,
    buttons: {
        Ok: function() {
            window.location.href = "findUsers";
            $( this ).dialog( "close" );
        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    }
});

function save_onclick() {
  $('#link_to_list').dialog('open');
}

Answer 2

$(this).dialog("zerstören")

Entfernen Sie die Dialogfunktionalität vollständig. Dadurch wird das Element wieder in den Zustand vor der Initialisierung versetzt.

$(this).dialog("schließen")

Schließen Sie das Dialogfeld

http://jqueryui.com/demos/dialog/

Answer 3

Marks Antwort funktioniert jedoch nicht, wenn Sie mit der Taste x schließen. Verwenden Sie nicht destroy. Setzen Sie autoOpen auf false, rufen Sie den Dialog auf und öffnen Sie ihn in einem separaten Aufruf.

    $( "#dialog" ).dialog({
        autoOpen: false,
        show: "blind",
        hide: "explode"
    });

    $( "#opener" ).click(function() {
        $( "#dialog" ).dialog( "open" );
        return false;
    });

http://jqueryui.com/demos/dialog/#animated