jQuery UI对话框-框未显示

Question

The dialog box isn't showing for some reason.. does anyone know why? 由于某些原因，该对话框没有显示。有人知道为什么吗？

I originally thought it was because of the links to jquery but they seem fine to me? 我原本以为是因为有jquery的链接，但对我来说似乎还好吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>

        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

        <script>
        $('#dialog').dialog({
            close: function() {
                $(this).find(':checked').each(function() {
                    var name = $(this).attr('name');
                    $('#form [name="' + name + '"]').val(true);
                });
            },
            buttons:{Close:function(){
            $(this).dialog('close');
        }
        }
        })
        </script>

    </head>

    <body>

        <form id="form">

            <div>form Box1<input type="text" name="box1"  /></div>
            <div>form Box2<input type="text" name="box2"  /></div>
            <div>form Box3<input type="text" name="box3"  /></div>

        </form>

        <div>Text fields shown for demo, use hidden in real form</div>

        <div id = "dialog">

            Box1<input type="checkbox" name="box1"  />
            Box2<input type="checkbox" name="box2"  />
            Box3<input type="checkbox" name="box3"  />

            <div>Checked boxes auto update to form on close</div>

        </div>  

    </body>
</html>

Taken from this jsfiddle which seems to work - http://jsfiddle.net/pLWzs/ 摘自这个似乎有效的jsfiddle- http://jsfiddle.net/pLWzs/

Thanks for the help 谢谢您的帮助

Answer 1

You need to put your code inside a document ready call. 您需要将代码放入文档准备调用中。

$(document).ready(function() {
  // Handler for .ready() called.
});

jsFiddle does this for you automatically, but you have to do it in your own code. jsFiddle自动为您执行此操作，但是您必须在自己的代码中执行此操作。

So for example: 因此，例如：

$(document).ready(function () {
    $('#dialog').dialog({
        close: function () {
            $(this).find(':checked').each(function () {
                var name = $(this).attr('name');
                $('#form [name="' + name + '"]').val(true);
            });
        },
        buttons: {
            Close: function () {
                $(this).dialog('close');
            }
        }
    })
});

Otherwise without it, your code is being executed before the elements actually exist. 否则，如果没有它，您的代码将在元素实际存在之前执行。

jQuery UI对话框-框未显示

问题描述

1 个解决方案

解决方案1
1 2013-03-25 17:21:38

jQuery UI对话框-框未显示

问题描述

1 个解决方案

解决方案1 1 2013-03-25 17:21:38

解决方案1
1 2013-03-25 17:21:38