0

我正在尝试在我的网络应用程序中实现一个 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，并且该对话框在页面加载时似乎可以正常工作，但在单击时却不行。

感谢您的帮助

4

2 回答 2

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>
于 2012-11-16T21:42:15.460 回答
0

这应该有效：

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

这是工作的JSFiddle

于 2012-11-16T21:41:29.110 回答