jQuery API の one( customEvent, fn ) は、１つ目の引数に指定したカスタムイベントに、２つ目の引数に指定したイベントハンドラを、一度だけバインドすることができるメソッド。
イベントタイプにバインドすることもできる。
記述方法
jQuery( セレクター ) . one( カスタムイベント, イベントハンドラ );
「セレクター」の要素の「カスタムイベント」のイベントに、「イベントハンドラ 」を一度だけバインド。
実装例（サンプル）
実装例（サンプル）の動作について
黄色のボックス内の上部中央のセレクトボックスで、カラーネームを選択すると、背景色が選択したカラーネームの色に変わる。ただし、一度しか色を変更しない。一度変更すると、セレクトボックスも無効になる。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-one' ) . one( 'customEventName', function( event, colorName ){
jQuery( this ) . css( 'backgroundColor', colorName );
} );
jQuery( '#jquery-api-change-select' ) . change( function () {
jQuery( this ) . attr( 'disabled', 'disabled' );
var str = jQuery( 'option:selected', this ) . text();
jQuery( '#jquery-api-one' ) . trigger( 'customEventName', str );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-one' ) . one( 'customEventName', function( event, colorName ){
jQuery( this ) . css( 'backgroundColor', colorName );
} );
jQuery( '#jquery-api-change-select' ) . change( function () {
jQuery( this ) . attr( 'disabled', 'disabled' );
var str = jQuery( 'option:selected', this ) . text();
jQuery( '#jquery-api-one' ) . trigger( 'customEventName', str );
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-one {
width: 100%;
height: 150px;
background-color: yellow;
border-radius: 10px;
border: 1px solid gray;
text-align: center;
}
-->
</style>
<!--
#jquery-api-one {
width: 100%;
height: 150px;
background-color: yellow;
border-radius: 10px;
border: 1px solid gray;
text-align: center;
}
-->
</style>
HTML
<div id="jquery-api-one">
<select id="jquery-api-change-select">
<option selected="selected">yellow</option>
<option>red</option>
<option>blue</option>
<option>green</option>
<option>pink</option>
</select>
</div>
<select id="jquery-api-change-select">
<option selected="selected">yellow</option>
<option>red</option>
<option>blue</option>
<option>green</option>
<option>pink</option>
</select>
</div>