1

我有以下html。它是一个寻呼机，使用带有图标的按钮触发服务器端的操作。这些图标onclick附加了一个事件，该事件应该触发服务器 URL（在jsfiddle我只是触发一个alert），如下所示：

<button class="btn bootstrap-button-margin-style force-height" type="button">
 <i class="icon-step-forward" onclick="alert('step-forward');">
 </i>
</button>

如果您四处点击，您会注意到警报并不总是显示（我会说它们只显示了 60% 的时间 - 我使用的是 Chrome）。

  • 这是为什么？
  • 有没有办法使onclick事件可靠？
  • 是否有更好的替代方法onclick，以便图标以可靠的方式触发相应的服务器操作？
4

2 回答 2

4

您甚至将 onclick 添加到i 标签，这只是按钮的一部分

您应该将事件添加到按钮对象，例如

<button class="btn bootstrap-button-margin-style force-height" type="button" onclick="alert('step-forward');">
    <i class="icon-step-forward" >
    </i>
</button>

小提琴示例http://jsfiddle.net/utku/wmcME/3/

作为替代方案，我建议使用jQuery以获得更好的 javascript 体验

于 2013-05-18T15:10:04.857 回答
2

您已将 onclick 事件附加到图标，而不是按钮。当您单击实际图标时，警报会出现 100% 的时间。如果您单击图标元素外部的按钮，则不会出现警报。

将 onclick 事件移动到按钮元素：

<button class="btn bootstrap-button-margin-style force-height" type="button" onclick="alert('step-forward');">  
    <i class="icon-step-forward"></i>  
</button>

更好的方法是将 JavaScript 逻辑与 HTML 标记分离。您可以使用 JavaScript 选择器在单独的 JavaScript 块中处理单击事件。

<button id="btn-step-forward" class="btn">  
    <i class="icon-step-forward"></i>  
</button>

使用 jQuery：

$('#btn-step-foward').click(function(e) { alert('step-forward'); });
于 2013-05-18T15:17:52.837 回答