Question

我正在尝试使用jquery ui显示模态表单。我已经改编了一个例子，但我无法启动对话框。我确定这很简单，但是有人能告诉我我做错了吗？

页面最初显示，但是当我点击“创建新用户”时，没有任何反应。

代码如下 - http://pastie.org/1000263也是（更容易阅读）。

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>jQuery UI Example Page</title>
  <link type="text/css" href="jquery-ui-1.7.3.custom/css/smoothness/jquery-ui-1.7.3.custom.css" rel="stylesheet" /> 
  <script type="text/javascript" src="jquery-ui-1.7.3.custom/js/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="jquery-ui-1.7.3.custom/js/jquery-ui-1.7.3.custom.min.js"></script>
  <script type="text/javascript">
  $(function(){
   $("#dialog-form").dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    modal: true,
    buttons: {
     'Create an account': function() {
      var bValid = true;
      allFields.removeClass('ui-state-error');

      if (bValid) {
       alert(name.val());
       $(this).dialog('close');
      }
     },
     Cancel: function() {
      $(this).dialog('close');
     }
    },
    close: function() {
     allFields.val('').removeClass('ui-state-error');
    }
   });

   $('#create-user')
    .button()
    .click(function() {
     $('#dialog-form').dialog('open');
    });


  });
  </script>

  <style type="text/css">
   /*demo page css*/
   body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
   .demoHeaders { margin-top: 2em; }
   #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
   #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
   ul#icons {margin: 0; padding: 0;}
   ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
   ul#icons span.ui-icon {float: left; margin: 0 4px;}
  </style> 
 </head>
 <body>
 <h1>Welcome to jQuery UI!</h1>

 <p style="font-weight: bold; margin: 2em 0 1em; font-size: 1.3em;">YOUR COMPONENTS:</p>
   <div id="dialog-form" title="Create new user">
    <p class="validateTips">All form fields are required.</p>

    <form>
    <fieldset>
     <label for="name">Name</label>
     <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
     <label for="email">Email</label>
     <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
     <label for="password">Password</label>
     <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
    </fieldset>
    </form>
   </div>  
   <button id="create-user">Create new user</button>
 </body>
</html>

Answer 1

当我删除.button（）

时，您的代码运行正常

   $('#create-user')
    .click(function() {
     $('#dialog-form').dialog('open');
    });

我不确定.button（）无论如何都会这样做。我不确定我以前见过它。

chrome中的javascript控制台说： “未捕获的TypeError：对象＃没有方法'按钮'”

javascript控制台对于“为什么不起作用”非常有用。

帮助'你好世界'jquery-ui莫代尔形式？

1 个答案: