YUI3按钮单击事件像个提交类型，而不是一个按钮式(YUI3 button click event

我使用ASP.NET MVC 3与Yahoo API version 3 。我试图让我的YUI3 button重定向到另一个页面，当我点击它，这个按钮是我的取消按钮。取消按钮是一个普通的按钮式，但它正在像提交按钮处理。它不是重定向到正确的页面，而是表现得像一个提交按钮，它揭开序幕像什么提交按钮会做我的页面验证。

我想，这可能是与我的HTML，但我没有验证它。这验证了100％正确。所以，我那么整个页精简到最低限度，但取消按钮仍然工作就像一个提交按钮。这是我的HTML标记：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
     <head>
          <title>Create2</title>
     </head>

     <body class="yui3-skin-sam">

          <h1>Test submit</h1>

          @using (Html.BeginForm())
          {
               <button id="SaveButton" type="submit">Save</button>
               <button id="CancelButton" type="button">Cancel</button>
          }

          <script src="http://yui.yahooapis.com/3.6.0pr4/build/yui/yui-min.js"></script>
          <script>
               YUI().use('button', function (Y) {
                    var saveButton = new Y.Button({
                         srcNode: '#SaveButton'
                    }).render();

                    var cancelButton = new Y.Button({
                         srcNode: '#CancelButton',
                         on: {
                              'click': function (e) {
                                   Y.config.win.location = '/Administration/Department/List';
                              }
                         }
                    }).render();
               });
          </script>

     </body>
</html>

我不知道我在做什么错在这里？这是也许他们的API中的错误？我测试的IE8和火狐上的最新版本。

更新：

我忘了提，如果这些按钮是不是形式标记之间，则重定向工作正常。如果我把它们放在表单标签，然后重定向不起作用。

Answer 1:

所述Y.Button插件被移除type从取消按钮属性。这使得该按钮像一个提交按钮。

有许多可能的路径，使这项工作。我将开始从简单到复杂。首先是要避免这个问题完全和所有不使用JavaScript。只需使用一个链接：

<form action="/Administration/Department/Create2" method="post">
    <button class="yui3-button">Save</button>
    <a class="yui3-button" href="/Administration/Department/List">Cancel</a>
</form>

毕竟，所有的按钮组件正在做的是添加一些CSS类的每个标签和很多其他的东西，使更复杂的部件成为可能。正如你可以在看到与cssbutton造型元素例如，即使<a>标签可以看起来像只使用YUI CSS样式漂亮的按钮。如果你没有使用JavaScript，最好不要使用它。

第二个选择是避免Y.Button小部件，并使用Y.Plugin.Button插件。这是在这两个kb和处理能力更加轻便。它不触及标签属性，让你的位置的代码将工作。

YUI().use('button-plugin', function (Y) {
  Y.all('button').plug(Y.Plugin.Button);
  Y.one('#CancelButton').on('click', function () {
    Y.config.win.location = '/Administration/Department/List';
  });
});

最后，你可以入侵周围的行为Y.Button防止按钮的默认操作部件：

var cancelButton = new Y.Button({
  srcNode: '#CancelButton',
  on: {
  'click': function (e) {
      e.preventDefault();
      Y.config.win.location = '/Administration/Department/List';
    }
  }
}).render();

Answer 2:

因为要重定向到另一个页面，我会用一个链接。这样做，这样你就不需要用JavaScript来初始化或注册的onClick监听器。

<button id="SaveButton" type="submit">Save</button>
<a id="CancelButton" href='/Administration/Department/List'>Cancel</a>

看看这个链接风格你链接： http://yuilibrary.com/yui/docs/button/cssbutton.html

文章来源: YUI3 button click event is acting like a submit type instead of a button type