onclick无法可靠工作

我有以下html。它是一个使用图标按钮在服务器端触发动作的寻呼机。的图标具有附加的onclick事件，应该触发服务器URL（在jsfiddle我只是触发alert），像这样：onclick无法可靠工作

<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，以便图标以可靠的方式触发相应的服务器操作？

来源

2013-05-18 dangonfast

您已将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>

一个更好的方法是从你的HTML标记解耦JavaScript逻辑。您可以使用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-18 15:17:52

感谢。我接受这个详细的'jQuery'代码的答案。 – dangonfast

您要添加的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体验

来源

2013-05-18 15:10:04

onclick无法可靠工作

回答

相关问题