jQuery oneメソッドで一度だけ実行する

jQueryのoneメソッドで、指定のイベントを一度だけ実行するサンプルです。

目次

oneメソッド

.one( events [, data ], handler )
  • jQueryのoneメソッドです。
  • 指定のイベントを一度だけ実行します。
  • 以下はjQueryサイトのoneメソッドのページです。
    http://api.jquery.com/one/

一度だけ実行するサンプル

クリックイベント発生時に、一度だけ実行するサンプルです。
ボタン1を押すと水色の背景色が消えて再度表示されます。何度も押せます。
ボタン2は、oneメソッドを使用しているため1度しか実行されません。

テスト1

 

上記コードのサンプルです。

<style>
p {background-color:PaleTurquoise;}
</style>

<p id="p1">テスト1</p>
<input type="button" id="button1" value="ボタン1" />
<input type="button" id="button2" value="ボタン2" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button1").click(function() {
		$("#p1").fadeToggle();
		$("#p1").fadeToggle();
	});

	$("#button2").one("click",function() {
			$("#p1").fadeToggle();
			$("#p1").fadeToggle();
		}
	);

</script>

17行目は、oneメソッドでclickイベントを指定しています。1回しかclickできません。

関連の記事

jQuery 属性値を取得/設定/削除する(attr/removeAttr)
jQuery textメソッドとhtmlメソッドの違いのサンプル
Query 繰り返し処理を行うサンプル(each)
jQuery findメソッドで子孫要素を操作する
jQuery onで複数のイベントリスナを登録
jQuery Deferredオブジェクトのサンプル

△上に戻る