質問: 初めて質問させていただきます。 php・jQuery・SQLを勉強し始めて3ヶ月の初心者です。 データベースの情報をWebブラウザで見れるためのプログラムをphpとjQueryで作成しています。 日別の情報を見るページに「今日」「前日」「翌日」を3つのボタンを作成し、 ボタンが押されたらajaxを利用して、 それぞれの日のデータを同一ページ内に入れ替わり表示しています。 **構成例:** home.php(メインページ) post.php(ajaxでhome.php内に表示するページ) jquery.common.js(scriptをまとめたページ) **やりたいこと:** 見ている日付によってボタンを無効にしたい **例)日付が今日の場合** 前日ボタン(有効) 今日ボタン(有効) 翌日ボタン(無効) **問題:** 1)翌日ボタンを無効にしようと、クリックイベントを指定している要素のclass(この場合:send)を`$('#dateNext').removeClass('send')`で削除しても、翌日ボタンをクリックするとイベントが発生しpostしてしまう。 ※Chromeのデベロッパーツールで削除を確認。 2)そして、ブラウザの更新ボタンを押すと、クリックイベントが発生しなくなり翌日ボタンが無効になる。 ググった結果、非同期通信の場合、入れ替え部分のclassを削除しても、`home.php`に記述している元のscriptはリロードするまで削除を知らないと考えたのですが...。 リロードせずにボタンを無効にする方法はあるのでしょうか。 初心者ですが、考え方、ヒントなどご教授いただければ幸いです。 ### 該当のソースコード ``` 前日 今日 翌日 ~post.phpの内容を表示~ ``` ``` //jquery.common.js function ajaxPost(event) { ~処理~ $.ajax({~処理~}) .done(function(data)( { ~処理~ //ボタン無効関数呼び出し $(function() { dateNavAreaCtrl(date); }); }) .fail(function(data)({~処理~}); } //ボタン無効関数 function dateNavAreaCtrl(getDate) { if(今日の日付だったら) { //翌日ボタンを無効 $("#dateNext").removeClass("send"); } } ```
回答: 定義した時点で確定してしまうので、 発火させないように上位のオブジェクトから参照してください ``` 前日 今日 翌日 ```