如何在asp中的按钮内添加span元素？答案

【问题标题】：How to add span element inside a button in asp?如何在asp中的按钮内添加span元素？
【发布时间】：2020-02-10 22:02:16
【问题描述】：

我有一个带有图像和按钮的侧边栏面板。

<div class="glyphRow" id="gly_Job" runat="server">
  <span class="glyphicon glyphicon-comment glyphiconSideMenu"></span>
  <asp:Button ID="btnJob" runat="server" Text="Job" 
    CssClass="btn btn-primary" OnClick="btnJob_Click" />
</div>

我想将按钮大小设置为 100%，以便我可以单击面板项目上的任何位置，但为了做到这一点，我必须将图像移动到按钮内。我该怎么做？

【问题讨论】：

<asp:Button 不是 JS 或 HTML ！

标签： javascript html asp.net

【解决方案1】：

类似的东西？

<div class="glyphRow" id="gly_Job" runat="server">
  <button ID="btnJob" runat="server" Text="Job" 
          CssClass="btn btn-primary" OnClick="btnJob_Click">
    <span class="glyphicon glyphicon-comment glyphiconSideMenu"></span>
  </button>
</div>

【讨论】：

我想用 asp:Button 代替 html 按钮
@neki_1111 您已要求 html 或 js 回答。不是 asp 答案。
我觉得你还需要把OnClick换成onserverclick，见：docs.microsoft.com/en-us/dotnet/api/…

【解决方案2】：

asp:button 不是标准 HTML，它是一个 ASP.net Webforms 控件，用于呈现 HTML。

如果您真的想继续使用asp:button，请使用以下javascript向div添加点击事件

document.getElementById("gly_job").addEventListener(function(){
    //Find the button and click it
    this.querySelector(".btn.btn-primary").click();
});

为了增加用户友好性，添加以下 CSS 以指示整个 div 是可点击的

#gly_job {cursor: pointer;}

注意：代码未经测试，可能需要修复语法错误

【讨论】：