如何使跨度可点击？答案

【问题标题】：How can I make a span clickable?如何使跨度可点击？
【发布时间】：2019-03-15 07:14:48
【问题描述】：

我有这个代码：

    <span class="glyphicon glyphicon-search"></span>
    @Html.TextBox("text", Model.Search.text, new {placeholder = Html.T("Поиск"), @class = "form-control"})

结果是这个：

如果用户键入一些文本并按 Enter 键，它可以正常工作。搜索工作正常。但是“搜索”按钮不起作用。它只是停留而不可点击。如何在不丢失外观的情况下使“搜索”按钮可点击？

【问题讨论】：

也许你可以给span添加一个点击事件监听器？您可以在 MDN 文档中找到示例：developer.mozilla.org/en-US/docs/Web/API/EventTarget/…
假设输入字段包含在form 元素中，您可以将span 更改为input 或button 属性type="submit"。
这是什么语法。新的模板引擎？

标签： javascript html css model-view-controller

【解决方案1】：

添加 onclick 事件。 (https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick)

<span class="glyphicon glyphicon-search" onclick="myFunction()"></span>
@Html.TextBox("text", Model.Search.text, new {placeholder = Html.T("Поиск"), @class = "form-control"}

myfunction 可以是触发输入提交的函数。

【讨论】：

【解决方案2】：

只需向 span 元素添加一个 id，然后在一个 js 文件中，在您单击该 id 时将一个事件附加到该 id，当发生这种情况时触发该功能。

例如<span class="glyphicon glyphicon-search" id = "icon"></span>

$(document).ready(function(){
  
  $("#icon").click(function(){
    
    alert("Hi");
  
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<span class="glyphicon glyphicon-search" id = "icon">Hello, click me!</span>

【讨论】：