Question

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

感谢您的帮助

Answer 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>

Answer 2

这应该有效：

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

这是有效的JSFiddle

jquery ui对话框无法打开

2 个答案: