jquery ui对话框打不开答案

【问题标题】：jquery ui dialog box not openingjquery ui对话框打不开
【发布时间】：2012-11-16 21:33:07
【问题描述】：

我正在尝试在我的网络应用程序中实现一个 jquery ui 对话框，但它似乎根本不起作用。我正在使用 PHP。

我有一个 PHP 代码，它定义了 for 对话框和一个单击后将打开对话框的按钮。

    <div id="dialog">This should show up </div> 
<button id="opener">Open Dialog</button>

我有一个单独的 JS 文件，在 ready 函数中，我有以下代码

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


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

单击按钮时，对话框似乎没有打开。我正在使用

jquery V1.7.1
jquery UI V 1.8.20

谁能帮我解释为什么它不起作用。

另外，我尝试将 autoOpen 设置为 true，并且该对话框在页面加载时似乎可以正常工作，但在单击时却不行。

感谢您的帮助

【问题讨论】：

尝试在 click 函数中返回 false ？也许默认的“按钮”点击功能会干扰？
您的控制台日志中是否有任何错误？按 F12，转到“控制台”选项卡，然后尝试单击按钮。
没有错误、警告或日志。但我刚试过 $("#dialog").dialog(open); （没有引号打开并且似乎有效。我的语法错误吗？
语法在我看来是正确的，但正如另一位用户建议的那样，尝试将 return false;在回调结束时防止按钮执行任何会覆盖它的默认操作。

标签： php jquery jquery-ui jquery-ui-dialog

【解决方案1】：

确保点击代码在页面加载后运行，否则可能无法找到并附加。可以肯定的是，我将您的 JS 代码包装在 jQuery 的 .ready() 中。

以下示例应该按照您的要求进行。如果您需要进一步的帮助，我建议您发布一个我们可以查看和调试的 URL。

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script>
    //Wait until the document is ready to be processed.
    jQuery(document).ready(function()
    {
        //Init your dialog box.
        $("#dialog").dialog({autoOpen:false}); 

        //Attach you click handler to the button.
        $("#opener").click(function(event)
        {
            //Stop any default actions on the button.
            event.preventDefault();
            //Open your dialog.
            $("#dialog").dialog("open");
        });
    });
    </script>
</head>
<body>

<div id="dialog">This should show up </div> 
<button id="opener">Open Dialog</button> 

</body>
</html>

【讨论】：

【解决方案2】：

这应该可行：

$("#opener").on('click', function(){
    $("#dialog").dialog("open");
});

这里正在工作JSFiddle

【讨论】：

我刚刚检查了文档，你是对的，它没有被弃用。然而，我确信我在某处读到建议使用 on 而不是 click，尽管它是 on 的简写。不过还是谢谢提醒。
点击不被弃用； live() 是。看API。
是的，这就是我记得的。谢谢。我删除了帖子中的错误信息。作为参考，这是我删除的内容：“click 已弃用，请改用 on。”