jQuery API の one( eventType, fn ) は、1つ目の引数に指定したイベントに、2つ目の引数に指定したイベントハンドラを、一度だけバインドすることができるメソッド。イベントハンドラを一度しか呼び出さない点が、bind( eventType, fn ) との違い。
カスタムイベントにバインドすることもできる。
記述方法
jQuery( セレクター ) . one( イベントタイプ, イベントハンドラ );
「セレクター」の要素の「イベントタイプ」のイベントに、「イベントハンドラ」をバインド。
eventType
1つ目の引数に指定できるイベントタイプと、そのイベントタイプの説明。
eventType | 説明 |
---|---|
blur | 要素からフォーカスを外したとき。 |
change | select 要素や、input 要素の値を変更したとき。 |
click | 要素をクリックしたとき。 |
dblclick | 要素をダブルクリックしたとき。 |
error | エラーイベントが発生したとき。 |
focus | 要素をフォーカスしたとき。 |
keydown | 要素の領域内で、キーボタンを押したとき。 |
keypress | 要素の領域内で、キーボタンを押したとき。 |
keyup | 要素の領域内で、押し下げたキーボタンを上げたとき。 |
load | 画像、スクリプトなど、サブ要素を全て読み込んだとき。 |
mousedown | 要素の領域上でマウスのボタンを押したとき。 |
mouseenter | マウスが要素の領域内に入ったとき。 |
mouseleave | マウスが要素の領域内から離れたとき。 |
mousemove | マウスを要素の領域上で動かしたとき。 |
mouseout | マウスを要素の領域外へ動かしたとき。 |
mouseover | マウスを要素の領域上で動かしたとき。 |
mouseup | 要素の領域上でクリックボタンを押して放したとき。 |
resize | ブラウザのウィンドウのサイズを変更したとき。 |
scroll | 要素をスクロールしたとき。 |
select | テキスト入力欄やテキストエリアにおけるテキストを選択したとき。 |
submit | フォームを送信したとき。 |
unload | ページから移動したとき。 |
実装例(サンプル)
セル1 |
セル2 |
セル3 |
セル4 |
セル5 |
セル6 |
実装例(サンプル)の動作について
黄色のセルを、クリックすると、背景色が赤色に変わり、セル内のテキストが、「クリック済み」に置き換わる。
実装例(サンプル)のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '.jquery-api-one' ) . one( 'click', function() {
jQuery( this ) . css( 'backgroundColor', 'red' );
jQuery( 'p', this ) . text( 'クリック済み' );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '.jquery-api-one' ) . one( 'click', function() {
jQuery( this ) . css( 'backgroundColor', 'red' );
jQuery( 'p', this ) . text( 'クリック済み' );
} );
} );
// -->
</script>
CSS
<style>
<!--
.jquery-api-one {
width: 100px;
height: 50px;
cursor: pointer;
background-color: yellow;
text-align: center;
}
-->
</style>
<!--
.jquery-api-one {
width: 100px;
height: 50px;
cursor: pointer;
background-color: yellow;
text-align: center;
}
-->
</style>
HTML
<table>
<tr>
<td class="jquery-api-one"><p>セル1</p></td>
<td class="jquery-api-one"><p>セル2</p></td>
<td class="jquery-api-one"><p>セル3</p></td>
</tr>
<tr>
<td class="jquery-api-one"><p>セル4</p></td>
<td class="jquery-api-one"><p>セル5</p></td>
<td class="jquery-api-one"><p>セル6</p></td>
</tr>
</table>
<tr>
<td class="jquery-api-one"><p>セル1</p></td>
<td class="jquery-api-one"><p>セル2</p></td>
<td class="jquery-api-one"><p>セル3</p></td>
</tr>
<tr>
<td class="jquery-api-one"><p>セル4</p></td>
<td class="jquery-api-one"><p>セル5</p></td>
<td class="jquery-api-one"><p>セル6</p></td>
</tr>
</table>