Fatal编程技术网
  • javascript/
  • Javascript YUI3按钮单击事件的行为类似于提交类型，而不是按钮类型

Javascript YUI3按钮单击事件的行为类似于提交类型，而不是按钮类型

javascript asp.net-mvc asp.net-mvc-3 web-applications

Javascript YUI3按钮单击事件的行为类似于提交类型，而不是按钮类型,javascript,asp.net-mvc,asp.net-mvc-3,web-applications,yui,Javascript,Asp.net Mvc,Asp.net Mvc 3,Web Applications,Yui,我正在使用ASP.netmvc3和yahooapi版本3。我试图让我的YUI3按钮重定向到另一个页面，当我点击它时，这个按钮是我的取消按钮。取消按钮是一种普通的按钮类型，但它被视为提交按钮。它不是重定向到正确的页面，而是像提交按钮一样启动页面验证，就像提交按钮一样 我认为它可能与我的HTML有关，但我确实验证了它。它验证了100%的正确性。因此，我将整个页面精简到最低限度，但取消按钮仍然像提交按钮一样工作。以下是我的HTML标记： @{ Layout = null; } <!DO

我正在使用
ASP.netmvc3
和
yahooapi版本3
。我试图让我的
YUI3按钮
重定向到另一个页面，当我点击它时，这个按钮是我的取消按钮。取消按钮是一种普通的按钮类型，但它被视为提交按钮。它不是重定向到正确的页面，而是像提交按钮一样启动页面验证，就像提交按钮一样

我认为它可能与我的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>

@{
布局=空；
}
创建2
提交测试
@使用（Html.BeginForm（））
{
拯救
取消
}
YUI（）。使用（'按钮'，函数（Y）{
var saveButton=新的Y.按钮({
srcNode:“#保存按钮”
}).render（）；
var cancelButton=新的Y.按钮({
srcNode:“#取消按钮”，
关于：{
“单击”：函数（e）{
Y.config.win.location='/Administration/Department/List'；
}
}
}).render（）；
});
我不确定我做错了什么？这可能是他们API中的错误吗？我正在IE8和最新版本的FireFox上进行测试

更新：

我忘了提到，如果这些按钮不在表单标记之间，那么重定向工作正常。如果我将它们放在表单标签中，则重定向不起作用。

我会使用链接，因为您正在重定向到另一个页面。这样做，您不需要使用javascript初始化它或注册onClick侦听器

保存
查看此链接以设置链接样式：

我会使用链接，因为您正在重定向到另一个页面。这样做，您不需要使用javascript初始化它或注册onClick侦听器

保存
查看此链接以设置链接的样式：

按钮
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>
最后，您可以通过阻止按钮的默认操作来绕过
Y.Button
小部件的行为：

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

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>
最后，您可以通过阻止按钮的默认操作来绕过
Y.Button
小部件的行为：

var cancelButton = new Y.Button({
  srcNode: '#CancelButton',
  on: {
  'click': function (e) {
      e.preventDefault();
      Y.config.win.location = '/Administration/Department/List';
    }
  }
}).render();
请详细说明为什么你说我需要使用一个按钮的链接安装？这是一个很好的建议。我也尝试了链接，使用了我的YUI3初始化代码，如上所述，我只是取出了on:部分。当页面加载时，它看起来像一个按钮。当我点击它时，它也会这样做，提交到表单。如果我取出链接的YUI初始化，那么它是一个提交按钮，旁边有一个取消链接。在我看来不一致。是的，它设置了一个按钮。现在，尝试添加一个点击事件到它，这是我的问题，并让它工作。试一下，让我知道它是否有效。你的链接指向YUI2。你的按钮初始化代码完全错误！链接还指向YUI2，它与我想要实现的目标无关。是的，我在发布后意识到了这一点。通过查看文档，您应该能够将按钮初始化为cssbutton，它只添加了按钮的样式。请详细说明为什么您说我需要使用按钮的链接安装？这是一个很好的建议。我也尝试了链接，使用了我的YUI3初始化代码，如上所述，我只是取出了on:部分。当页面加载时，它看起来像一个按钮。当我点击它时，它也会这样做，提交到表单。如果我取出链接的YUI初始化，那么它是一个提交按钮，旁边有一个取消链接。在我看来不一致。是的，它设置了一个按钮。现在，尝试添加一个点击事件到它，这是我的问题，并让它工作。试一下，让我知道它是否有效。你的链接指向YUI2。你的按钮初始化代码完全错误！链接还指向YUI2，它与我想要实现的目标无关。是的，我在发布后意识到了这一点。通过查看文档，您应该能够将按钮初始化为cssbutton，它只添加了按钮的样式。感谢您提供的详细答案。为什么您认为它会使按钮成为提交按钮？因为表单中按钮的默认类型是“提交”。看看标准：默认或非默认，他们可以保持按钮的声明。是的，这可能是一个错误。您可以在YUI问题跟踪程序中提交一个问题：谢谢您的详细回答。为什么您认为它会使按钮成为提交按钮？因为表单中按钮的默认类型是“提交”。看看标准：默认或非默认，他们可以保持按钮的声明。是的，这可能是一个错误。您可以在YUI问题跟踪程序中提交问题：