メモしよっと

なんでもメモするブログです。

clickイベント後のAjaxがうまくいかなくて少し悩んだ話 - jQuery

要件

  1. サムネイル画像をクリックしたら、phpで生成した大きな画像を表示する。
  2. サムネをクリックするユーザーのステータスによっては、1.以外の処理をしたい

実装方法

clickイベント実行時に、PHPファイルにGETリクエストを送り、ユーザーステータスを返してもらう

<a href='createImage.php' class="highslide"><img src="thumbnail.jpg"></a>
$('.highslide').on('click', function(e){
  $.get("getStatus.php", {user: uid}, function(data){
     //返り値data次第で処理を分岐
            console.log("kakunin");
  });
});

困ったこと

$.getのfunctionの中が実行されない。上の例でいえばconsole.logが表示されない。

解決方法

clickイベント内に、return false; を記載し、hrefの実行を止める。

return false;

イベントを実行する時、親のイベントを止めるのは初歩的な事なのに、忘れていました^^; 反省の意を込めて、ブログに書き残しておきます。