“j查询 UI”对话框未打开

我正在尝试在我的 Web 应用程序中实现一个 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

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

另外，我尝试将自动打开设置为 true，对话框似乎在页面加载时工作正常，但在单击时无法正常工作。

感谢您的帮助

请确保在页面加载后运行点击代码，否则可能无法找到并附加它。我把你的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>

这应该有效：

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

这是工作 JSFiddle

相关内容

最新更新

热门标签：