PG WORKS

PHPやLinuxサーバなどのノウハウや、便利なツールを紹介していきます。

【jQuery】よく使うイベント判定

f:id:zen6a:20170413223754p:plain

イベント判定処理部分について記載します。
プログラム部分は、コピペで使えますので、良ければお使いください。

クリックイベント

<script type="text/javascript">
  $(document).ready(function(){
    $("#zen6aadd").click(function() {
       // ここに処理を書く
    });
  });
</script>

<input type="button" id="zen6aadd" value="新規作成">

id名が「zen6aadd」をクリックしたときに、イベントが発生します。
※同じid名があると片方した反応しないため、複数反応させるためには、下記の記述にします。

クリックイベント(id複数版)

<script type="text/javascript">
  $(document).ready(function(){
    $("[id=zen6aadd]").click(function() {
       // ここに処理を書く
    });
  });
</script>

<input type="button" id="zen6aadd" value="新規作成">

セレクトボックスの値が変更されたときの判定イベント

<script type="text/javascript">
  $(document).ready(function(){
    $("#selecterzen6a").change(function() {
       // ここに処理を書く
    });
  });
</script>
<select name="selecterzen6a" id="selecterzen6a">
  <option value="テラバトル">テラバトル</option>
  <option value="DDR">DDR</option>
  <option value="PHP">PHP</option>
  <option value="jQuery">jQuery</option>
  <option value="CSS">CSS</option>
</select>

動的に追加したフォームを判定したいとき

<script type="text/javascript">
  $(document).ready(function(){
    $(document).on('click', '#zen6aadds', function(e){
       // ここに処理を書く
    });
  });
</script>

<input type="button" id="zen6aadds" value="新規作成">