jQuery API の one( eventType, eventData, fn ) は、１つ目の引数に指定したイベントに、３つ目の引数に指定したイベントハンドラを、一度だけバインドすることができるメソッド。２つ目の引数に指定したデータを、イベントハンドラに引き渡すことができる。
記述方法
jQuery( セレクター ) . one(
イベントタイプ,
{
イベントデータ名: イベントデータ
},
イベントハンドラ
);
イベントタイプ,
{
イベントデータ名: イベントデータ
},
イベントハンドラ
);
「セレクター」の要素の、「イベントタイプ」のイベントに、「イベントハンドラ」を一度だけバインド。「イベントデータ」を「イベントデータ名」に格納。
イベントハンドラ内でのイベントデータの取り出し方
event . data . イベントデータ名
実装例（サンプル）
- リストアイテム1
- リストアイテム2
- リストアイテム3
- リストアイテム4
- リストアイテム5
実装例（サンプル）の動作について
各リストアイテムをクリックすると、リストマークの白い丸が、黒い丸に変化する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-one li' ) . one(
'click',
{
type: 'disc',
},
function( event ) {
jQuery( this ) . css( 'list-style-type', event . data . type );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-one li' ) . one(
'click',
{
type: 'disc',
},
function( event ) {
jQuery( this ) . css( 'list-style-type', event . data . type );
}
);
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-one {
list-style-type: circle;
cursor: pointer;
}
-->
</style>
<!--
#jquery-api-one {
list-style-type: circle;
cursor: pointer;
}
-->
</style>
HTML
<ul id="jquery-api-one">
<li>リストアイテム1</li>
<li>リストアイテム2</li>
<li>リストアイテム3</li>
<li>リストアイテム4</li>
<li>リストアイテム5</li>
</ul>
<li>リストアイテム1</li>
<li>リストアイテム2</li>
<li>リストアイテム3</li>
<li>リストアイテム4</li>
<li>リストアイテム5</li>
</ul>