質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

  • jQuery

    7106questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1151questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 887

sanpei

score 11

初めて質問させていただきます。
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はリロードするまで削除を知らないと考えたのですが…。

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

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

該当のソースコード

<!--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");
    }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

<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>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/08 09:45

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

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

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

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

    キャンセル

同じタグがついた質問を見る

  • jQuery

    7106questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1151questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。