Question

我有以下html。它是一个寻呼机，它使用带图标的按钮触发服务器端的操作。这些图标附加了onclick事件，该事件应该触发服务器网址（在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替代方案，以便图标以可靠的方式触发相应的服务器操作？

Answer 1

即使是我标记，您也只是添加onclick，这只是按钮的一部分

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

<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体验

Answer 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块中处理click事件。

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

使用jQuery：

$('#btn-step-foward').click(function(e) { alert('step-forward'); });

onclick不能可靠地工作

2 个答案: