jQuery無双

jQueryをとことん使いこなす! jQuery1.12対応。使い方、入門、サンプル、ノウハウをとことん極めた最強ブログ。

one():要素に1度だけイベントに紐づく処理を設定する

      2016/07/01

one():要素に1度だけイベントに紐づく処理を設定する

要素に1度だけイベントに紐づく処理を設定するの書式
要素.one(イベントのタイプ, 処理);

要素に1度だけイベントに紐づく処理を設定する場合は、要素.one(イベントのタイプ, 処理);

要素に1度だけイベントに紐づく処理を設定するjQueryのサンプルコード

1.button(#btnOne)にoneメソッドの第1引数にクリックのイベントタイプを指定、第2引数に処理を指定

2.クリックされたらカウントアップされた旨のメッセージをdiv(#divMessage)を表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
<!--
div{margin: 10px; padding: 10px; border: 1px solid #000000; }
button{margin: 10px; padding: 10px; }
-->
</style>
<script src="../../js/jquery-1.12.2.min.js"></script>
<script>
$(function(){
  var clickCount = 0;
  
  // div(#divMessage)に表示メッセージのセット
  $("#divMessage").text("button click count:" + clickCount);
  
  // button(#btnOne)にoneメソッドにてクリックイベントを1回だけ紐づける
  $("#btnOne").one("click", function(){
    // クリックされる度にカウントアップ
    clickCount++;

    $("#divMessage").text("button click count:" + clickCount);
  });

});
</script>
</head>
<body>
  <div id = "divMessage"></div>
  <button id = "btnOne">click one only</button>
</body>
</html>
要素に1度だけイベントに紐づく処理を設定するjQueryのサンプルの結果

表示させただけの一番最初の画面
jquery,events,1度,一度,イベント,紐づけ,サンプル

 


ボタンを1回クリックしたら表示メッセージがカウントアップされて回数が1と表示される
jquery,events,1度,一度,イベント,紐づけ,サンプル

 


さらにもう1回クリックしても1回クリック済みなのでクリックイベントは発生せず、当然カウントアップもされない
jquery,events,1度,一度,イベント,紐づけ,サンプル

 

 - イベント(events) , , , , , ,