jQuery 指定のイベント発生時に一度だけ実行するサンプル(one)

jQueryの指定のイベント発生時に一度だけ実行するサンプルです。
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/1.12.4/jquery.min.js"></script>
<script>
$(function() {

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

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

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

 

oneメソッド

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

関連の記事

jQuery 属性値を取得/設定するサンプル(attr)
jQuery textメソッドとhtmlメソッドの違いのサンプル
jQuery ループ処理を行うサンプル(each)
jQuery 子孫要素を検索するサンプル(find)
jQuery 1つの要素に複数のイベントリスナを登録するサンプル(on)
jQuery Deferredオブジェクトのサンプル

△上に戻る