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

jQueryの指定のイベント発生時に一度だけ実行するサンプルです。
oneメソッドを使用します。

サンプル

ボタン1またはボタン2を押すと文字がフェードアウトしてフェードインします。
→ボタン1は、何度も実行できます。
→ボタン2はoneメソッドを使用しているため1度しか実行できません。

テスト1

コード

上記コードのサンプルです。
19行目は、oneメソッド、20行目は、clickイベントを指定しています。
21行目以降は、ボタン2の1度目のクリック時のみ実行します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryのサンプル</title>
<style>
p {background-color:PaleTurquoise;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	var str1;
	// ボタン1を押したとき
	$("#b1").click(function() {
		$("#p1").fadeToggle();
		$("#p1").fadeToggle();
	});
	// ボタン2を押したとき
	$("#b2").one(
		'click',
		function() {
			$("#p1").fadeToggle();
			$("#p1").fadeToggle();
		}
	);
});
</script>
</head>
<body >
<p id="p1">テスト1</p>
<input type="button" id="b1" value="ボタン1" />
<input type="button" id="b2" value="ボタン2" />
</body>
</html>

oneメソッド

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

関連の記事

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

 はまったらエンジニア特化型Q&Aサイト
【teratail(テラテイル)】で質問しましょう!


△上に戻る