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

ボタンの一部にすぎないi タグにも 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/

別の方法として、JavaScript のエクスペリエンスを向上させるためにjQueryを使用することをお勧めします

于 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>

より良いアプローチは、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-18T15:17:52.837 に答える