on()：要素にイベントに紐づく処理を設定する

2016/06/25 2016/06/25

要素にイベントに紐づく処理を設定する

要素にイベントに紐づく処理を設定するの書式

要素.on(イベントのタイプ, function(){
  処理内容
});

要素にイベントに紐づく処理を設定する場合は、要素.on(イベントのタイプ, function(){ 処理内容 });

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

１．カウント変数を定義、最初は0

２．div(#divMessage)に表示メッセージのセット、カウント変数も付ける

３．button(#btnTest)にonメソッドにてクリックイベントを紐づける

４．このボタンがクリックされたらカウント変数に1を加えて表示

<!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(#btnTest)にonメソッドにてクリックイベントを紐づける
  $("#btnTest").on("click", function(){
    // クリックされる度にカウントアップ
    clickCount++;
    $("#divMessage").text("button click count:" + clickCount);
  });
});
</script>
</head>
<body>
  <div id = "divMessage"></div>
  <button id = "btnTest">button</button>
</body>
</html>