在标题中显示提交按钮答案

【问题标题】：Display submit button in header在标题中显示提交按钮
【发布时间】：2010-11-22 09:52:21
【问题描述】：

我目前正在将一个 jQTouch Web 项目移植到 jQuery Mobile 并遇到以下问题：我需要在页眉中显示一个表单提交按钮，但除非我在页眉中将提交按钮设置为一个动作（而不是在内容中提交类型的输入）jQuery Mobile 将始终将该按钮呈现为表单的一部分。

这将起作用（按钮将显示在页眉的右侧）：

<div data-role="header" data-theme="b">
     <a href="#" class="ui-btn-right" data-icon="check"><%: Resources.View.Account.Labels.DoLogOn %></a>
</div>

问题是，我必须编写自定义 javascript 来触发提交，显然我不想这样做。另一方面，如果我在表单中处理这个，即

<% using (Html.BeginForm("LogOn", "Account", 
     new { returnUrl = Request.QueryString["ReturnUrl"] }, FormMethod.Post,         
     new { @class = "ui-body ui-body-c" }))
   {%>
      <fieldset class="ui-grid-a" data-theme="c">
         <input data-icon="check"
                class="ui-btn-right"
                type="submit" 
                value="<%= Resources.View.Account.Labels.DoLogOn %>" />
      </fieldset>
<% } %>

按钮将显示在内容里面。

有没有办法让jQuery Mobile使用后一种方法在标题中显示提交按钮？

【问题讨论】：

标签： asp.net-mvc jquery-mobile jqtouch

【解决方案1】：

我知道我迟到了几个月，但我发现这篇文章正在研究另一个问题。要从标题中的按钮提交页面，您可以使用以下按钮标记：

<a href="#" onclick="$('form#Account').trigger('submit')" class = "ui-btn-right" data-role="button" >Logon</a>

【讨论】：

【解决方案2】：

我不熟悉jQTouch，但是像下面这样的东西怎么样？问题可能与使用的 css 类以及您在哪里使用它们有关。

<% using (Html.BeginForm("LogOn", "Account", 
     new { returnUrl = Request.QueryString["ReturnUrl"] }, FormMethod.Post))
   {%>
   <div data-role="header" data-theme="b">
     <fieldset class="ui-grid-a" data-theme="c">
     <input data-icon="check"
            class="ui-btn-right"
            type="submit" 
            value="<%= Resources.View.Account.Labels.DoLogOn %>" />
     </fieldset>
   </div>
   <div id="Content" class="ui-body ui-body-c">
      ...content here
   </div>
<% } %>

【讨论】：

不起作用，因为标题在表单内呈现（在其周围添加了一个额外的框架）并且按钮看起来完全被按钮样式的链接弄乱了，该链接出现在它应该加上的位置跨越整个页眉并显示在所有其他内容之上的输入元素。
我建议使用 dom 检查器来查看应用于每个节点的 css。您可以使用 IE 8 中的开发者工具或为 firefox 安装 firebug。