Wie startet man einen Jquery-Dialog, wenn man auf einen <a href>-Link klickt?

Question

Wie startet man einen Jquery-Dialog, wenn man auf einen Link klickt?

dies scheint nicht zu funktionieren

 <script type="text/javascript">
  $(document).ready(function() {

  $("a.To").click(function(e) {
      e.preventDefault();
      $("#dialog").dialog({height:300});
  });

im Körper:

<a href="#" id="To">To</a>

Answer 1

Für id sollten Sie # verwenden:

$("a#To")

Dot ist für Klassen.

Answer 2

Ich habe dies kürzlich für die Bestätigung von Lösch-Links in meinem CMS getan. Zunächst sollten Sie ein Dialogfenster instanziieren (wenn Sie auf "Schließen" klicken und es dann wieder öffnen, wird es angezeigt... ansonsten wird es zerstört):

$(document).ready(function()
{
    /**
     * Create a dialog box for confirming deletes.
     * This creates the box at domready. The box is opened
     * by a call to dialog("open") in the delete link.
     */
    $("#delete-dialog").dialog({
        autoOpen   : false,
        bgiframe   : true,
        buttons    : {
            "Yes, I'm sure" : function()
            {
                $(this).dialog("close");
                var href = $(this).dialog("option", "href");
                var row = $(this).dialog("option", "row");
                $.doDelete(href, row);
            },
            "Cancel" : function()
            {
                $(this).dialog("close");
            }
        },
        height     : 150,
        modal      : true,
        overlay    : {
            backgroundColor : "#000000",
            opacity         : 0.75
        },
        resizable : false
    });
});

Schließen Sie dann die a-Tags an (immer noch im document.ready-Block):

/**
 * Make all delete links confirm before sending to delete path.
 */
$("a.delete-href").live("click", function(event) 
{
    event.preventDefault();

    var href = $(this).attr("href");
    var row = $(this).parent().parent();

    // pass some custom options to the dialog
    $("#delete-dialog").dialog("option", "href", href);
    $("#delete-dialog").dialog("option", "row", row);
    // open the previously init'ed dialog
    $("#delete-dialog").dialog("open");
});

Answer 3

Sie verwenden einen Klassenselektor, aber Ihre Suche nach der id ... Sie benötigen die folgenden.

$("#To").click(function(e) {
      e.preventDefault();
      $("#dialog").dialog({height:300});
  });

Answer 4

Da Sie die Auswahl nach dem id Attribut, der richtige Selektor ist "a#To" statt "a.To"

Answer 5

Den Code:

$("#dialog").dialog({height:300});

baut den Dialog auf, der Code zum Öffnen eines Dialogs lautet:

$("#dialog").dialog("open");

bearbeiten: obwohl ich denke, dass autoOpen standardmäßig auf true gesetzt ist, sodass Ihr Code funktionieren sollte, es sei denn, Ihr Selektor ist defekt. Ich empfehle, autoopen auf false zu setzen und den open-Parameter zu verwenden, um den Dialog zu öffnen (auf diese Weise müssen Sie ihn nicht neu aufbauen, wenn Sie versuchen, ihn zu öffnen):

$("#dialog").dialog({height:300, autoOpen:false});