当您单击<a href>链接时，如何启动一个jQuery对话框

Question

当你点击链接时如何启动jQuery对话框？

这似乎无法正常工作。

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

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

在正文中：

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

- leora

Answer 1

对于 id 属性，应该使用 #：

$("a#To")

点表示类。

- Daniel Moura

---

a#To和#To之间有什么区别吗？ - leora

如果您正确使用id属性（即仅使用一次），则没有区别（而且#To在理论上更快，因为它不进行tagName检查）。 - Alex Gyoshev

不应该有任何差异。在无效的文档中，可能会存在两个共享相同ID的元素，这是未定义行为（我认为）。如果进行标签名称和ID检查，并且这两个元素具有不同的标签名称，则可能会得到不同的结果，假设jQuery在选择器中不忽略标签名称。 - strager

Answer 2

最近我在我的内容管理系统中为确认删除链接做了这个。首先，您应该实例化一个对话框窗口（这样如果您点击对话框上的关闭按钮，然后再次打开它，它就会出现...否则，它将被销毁）：

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

然后在document.ready块中“连接”a标签：

/**
 * 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");
});

- typeoneerror

Answer 3

您正在使用类选择器，但是您正在寻找id...您需要使用以下内容。

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

- redsquare

Answer 4

由于您是通过 id 属性进行选择，因此正确的选择器是 "a#To" 而不是 "a.To"

- Alex Gyoshev

Answer 5

代码：

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

将构建对话框，打开对话框的代码如下：

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

编辑：虽然我认为autoOpen默认设置为true，所以你的代码应该可以工作，除非你的选择器出了问题。我建议将autoOpen设置为false，并使用open参数打开对话框（这样每次尝试打开它时就不必重新构建它）：

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

- mkoryak