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

01. oneメソッド

・oneメソッドとは

・oneメソッドで一度だけ実行するサンプル

oneメソッドとは

.one( events [, data ], handler )

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

oneメソッドで一度だけ実行するサンプル

クリックイベント発生時に、一度だけ実行するサンプルです。

ボタン1を押すと水色の背景色が消えて再度表示されます。何度も押せます。
ボタン2は、oneメソッドを使用しているため1度しか実行されません。

テスト１

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

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

<p id="p1">テスト１</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できません。