jQuery でclick要素の初回クリックを判定する方法の覚書

jQueryでボタン等を作った場合に

初回だけさせたい動作がある場合に、そのクリックが現在表示されているページで初回のクリックなのかどうかを判定して実行する方法

jQuery で初回クリックを判定する

jQueryには hasClass という便利なものがあって

これを条件にしてやると、簡単に初回クリックかどうかを判別出来ます

$('.button').on('click',function(){
  
  if ($(this).hasClass('first-click')) {
    //first-chlick のクラスがあるので 何も実行しない
  } else {
    
    //実行する内容
    $(this).attr('scr','url');
    
    //初回の実行が終わったら、クラスをつけて 2回目以降とする
    $(this).addClass('first-click';)
    
  }
})

これで、判定することが出来ます

どういった用途に使ったかというと

ボタンをクリックすると、表示される iframe を実装するときに

iframe のタグに data-src を設定しておき

それを初回クリック時のみ読み取るというもの

2回目以降は、ボタンをクリックすることでその iframe の表示非表示をさせるようにしてあるので

表示、非表示のトリガーに data-src から取得してっていうのを繰り返すと

毎回 iframe が新規に読み込まれるので、それを回避して開閉のボタンの機能を保つように

今回の、初回クリックの判定を上のコードのようにしました

今回は、hasclass を使っているのは

this と組み合わせたかったからです

複数のボタンを一つのコードで制御したかったので、そのボタンにclassをつけてやるのが手っ取り早かったです