ajaxで非同期通信した後に受信ページにあるボタンを無効にしたい

Question

初めて質問させていただきます。
php・jQuery・SQLを勉強し始めて3ヶ月の初心者です。

データベースの情報をWebブラウザで見れるためのプログラムをphpとjQueryで作成しています。
日別の情報を見るページに「今日」「前日」「翌日」を3つのボタンを作成し、
ボタンが押されたらajaxを利用して、
それぞれの日のデータを同一ページ内に入れ替わり表示しています。

構成例：
home.php（メインページ）
post.php（ajaxでhome.php内に表示するページ）
jquery.common.js（scriptをまとめたページ）

やりたいこと：
見ている日付によってボタンを無効にしたい

例）日付が今日の場合
前日ボタン（有効）
今日ボタン（有効)
翌日ボタン（無効）

問題：
１）翌日ボタンを無効にしようと、クリックイベントを指定している要素のclass（この場合：send）を$('#dateNext').removeClass('send')で削除しても、翌日ボタンをクリックするとイベントが発生しpostしてしまう。
※Chromeのデベロッパーツールで削除を確認。

２）そして、ブラウザの更新ボタンを押すと、クリックイベントが発生しなくなり翌日ボタンが無効になる。

ググった結果、非同期通信の場合、入れ替え部分のclassを削除しても、home.phpに記述している元のscriptはリロードするまで削除を知らないと考えたのですが…。

リロードせずにボタンを無効にする方法はあるのでしょうか。

初心者ですが、考え方、ヒントなどご教授いただければ幸いです。

###該当のソースコード

<!--home.php-->

<div class="btnGroup">
    <button type="button" id="datePre" class="send" value="datePre">前日</button>
    <button type="button" id="dateNow" class="send" value="dateNow">今日</button>
    <button type="button" id="dateNext" class="send" value="dateNext">翌日</button>
</div><!-- / .btnGroup-->
<div id="ajax">
～post.phpの内容を表示～
</div>
<script>
//クリックイベント
    $(function()
    {
        $('.send').on('click',{url :"post.php"},ajaxPost);
    });
</script>

//jquery.common.js

function ajaxPost(event)
{
    ～処理～

    $.ajax({～処理～})

    .done(function(data)(
    {
        ～処理～

        //ボタン無効関数呼び出し
        $(function()
        {
            dateNavAreaCtrl(date);
        });
    })

    .fail(function(data)({～処理～});
}

//ボタン無効関数
function dateNavAreaCtrl(getDate)
{
    if(今日の日付だったら)
    {
        //翌日ボタンを無効
        $("#dateNext").removeClass("send");
    }
}

Answer 1

定義した時点で確定してしまうので、
発火させないように上位のオブジェクトから参照してください

<style>
.send{color:red;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $(document).on('click','.send',function(){
    alert($(this).val())
  });
  $('input[type=button][value="stop dateNext"]').on('click',function(){
    $('#dateNext').removeClass('send');
  });
});
</script>

<div class="btnGroup">
    <button type="button" id="datePre" class="send" value="datePre">前日</button>
    <button type="button" id="dateNow" class="send" value="dateNow">今日</button>
    <button type="button" id="dateNext" class="send" value="dateNext">翌日</button>
    <input type="button" value="stop dateNext">
</div>

Comments

[sanpei]

的確なご回答ありがとうございました！
クリックイベント部分を下記に変更し、

$('.send').on('click',{url :"post.php"},ajaxPost);
↓
$(document).on('click','.send',{url :"post.php"},ajaxPost);

documentが構築された後に実行することで思い通りの処理を実現することができました。