为什么我的 Javascript 对话框无法工作答案

【问题标题】：Why wont my Javascript dialog box work为什么我的 Javascript 对话框无法工作
【发布时间】：2011-07-27 10:25:43
【问题描述】：

我已经尝试了很长时间才能使此对话框正常工作。我已经爬过谷歌并在这里查看了许多问题。我只是无法让它以任何形状或形式工作。我正在尝试获得与此类似的结果： http://example.nemikor.com/basic-usage-of-the-jquery-ui-dialog/

我确实尝试使用此源中的代码，但我也无法让它工作。

这是 jQuery：

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

     // Initialize my dialog
     $("#dialog").dialog({
       autoOpen: false,
       modal: true,
       buttons: {
       "OK":function() { // do something },
       "Cancel": function() { $(this).dialog("close"); }
    }
});

 // Bind to the click event for my button and execute my function
       $("#x-button").click(function(){
       Foo.DoSomething();
       });
   });

       var Foo = {
       DoSomething: function(){
       $("#dialog").dialog("open");
     }
   }

这是 HTML：

<div id="column1">
        <h2>
            Features</h2>
        <p>
            Click an image below to view more information on our products.</p>
        <img src="../Images/lockIcon.png" alt="Security" />
        <input id="x-button" type="button" />
        <p id="dialog" display="none">This is content!</p>
</div>

我已尽一切努力让它工作，但它没有发生。 jQuery 本身来自一个类似问题的答案，我在自己放弃生命后尝试使用它，如果你能帮助我，我将不胜感激，请注意，我是 Javascript/ 新手jQuery 所以请不要对我说得太糟糕了。

谢谢。

【问题讨论】：

“不起作用”是什么意思？你有错误吗？
对不起，有点乏味，我的意思是，当我按下按钮时，什么都没有发生，没有任何功能运行或任何东西。
如果这是完整的代码，你还没有关闭第一个{。 JavaScript 控制台应该显示语法错误。您可以使用连贯的缩进来避免此类错误。
您是否尝试过按状态放置 alert() 语句来找出哪些被调用，哪些未被调用。确保页面上没有两个具有相同 ID 的元素。
@Álvaro G. Vicario 我在实际代码上使用了连贯缩进，我只需要为这篇文章调整它，因为我认为它可能会搞砸，抱歉。我现在已经关闭了它，但它似乎仍然没有运行该功能。

标签： javascript jquery html dialog

【解决方案1】：

大括号在这里被注释掉：

"OK":function() { // do something },

你需要小心右括号和花括号。他们有更多问题，我修复了它们，以下工作：

<html>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

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

     // Initialize my dialog
     $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            "OK":function() {},
            "Cancel": function() { $(this).dialog("close"); }
        }
    }
    );

    // Bind to the click event for my button and execute my function
    $("#x-button").click(function(){
        Foo.DoSomething();
    });


    var Foo = {
        DoSomething: function(){
            $("#dialog").dialog("open");
        }
    }
});
</script>
</head>
<body>


<div id="column1">
        <h2>
            Features</h2>
        <p>
            Click an image below to view more information on our products.</p>
        <img src="../Images/lockIcon.png" alt="Security" />
        <input id="x-button" type="button" />
        <p id="dialog" display="none">This is content!</p>
</div>
</body>
</html>

【讨论】：

【解决方案2】：

您在这一行有一个错误，因为您的行尾注释隐藏了解释器的右花括号。

"OK":function() { // do something },

您需要将其删除或替换为/* do something */。

这对我有用：

<html>
    <head>
        <link type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                // Initialize my dialog
                $("#dialog").dialog({
                    autoOpen: false,
                    modal: true,
                    buttons: {
                        "OK":function() { },
                        "Cancel": function() { $(this).dialog("close"); }
                    }
                });

                // Bind to the click event for my button and execute my function
                $("#x-button").click(function(){
                    Foo.DoSomething();
                });
            });

            var Foo = {
                DoSomething: function(){
                    $("#dialog").dialog("open");
                }
            }
        </script>
    </head>
    <body>
        <div id="column1">
            <h2>Features</h2>
            <p>Click an image below to view more information on our products.</p>
            <img src="../Images/lockIcon.png" alt="Security" />
            <input id="x-button" type="button" />
            <p id="dialog" display="none">This is content!</p>
        </div>
    </body>
</html>

【讨论】：

是的，我已经试过了，但还是没有用。问题似乎是实际按钮没有运行该功能，我不确定我是否正确引用它。
也许你忘了附加 jquery-ui 脚本？ :)

【解决方案3】：

这里是解决方案 http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

摘自该页面：

解决这个问题的简单方法是用 autoOpen 设置为 false 然后在事件中调用 .dialog('open') 处理程序。

$('#opener').click(function() {
        $dialog.dialog('open');
        // prevent the default action, e.g., following a link
        return false;
    });

【讨论】：