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

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

ただいまの
回答率

90.02%

【jQuery】.htmlで追加した要素に、そのまま.attrするには?

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,003

nnahito

score 1838

 質問概要

jQueryの.html()で追加した要素の中のあるidに、attr()で属性を付けたい。

 質問詳細

一つの関数の中に、2回ajax処理が書かれており、
1回目のajax処理でカレンダーを作成します。

2回目のajax処理で、カレンダーのある日付にattrで属性を付けたいのですが、
.onのイベントは発生せず、何を指定したら良いのか困っています…

onイベントをclickなどなしで、どのように発火させれば良いのでしょうか。
ご存じの方がいらっしゃいましたら、ご教授いただけると幸いです。

// カレンダーのデータ取得
    function getCalendar(year, month){
        var dt = new Date();

        // 引数が与えられなかった場合
        if ( year === undefined ) dt.getFullYear();
        if ( month === undefined ) dt.getMonth() + 1;

        var map = {"year": year, "month": month };

        // カレンダーを取得
        $.ajax({
            type: "POST",
            url: "./operation/get_calendar.php",
            data: map,
        }).done(function(data){
            sp = data.split("\t");

            var cnt = 0;
            var result = '<table id="calendar">';
            result += '<tr><td>日</td><td>月</td><td>火</td><td>水</td><td>木</td><td>金</td><td>土</td></tr>';

            for ( var i=0; i<sp.length; i++ ){
                if ( cnt == 0 ) result += '<tr>';

                if ( isNaN(sp[i]) == false ){
                    result += '<td id="d'+ sp[i] +'">' + sp[i] + '</td>';
                }else{
                    result += '<td id="blank">' + sp[i] + '</td>';
                }

                cnt += 1;

                if ( cnt >= 7 ){
                    cnt = 0;
                    result += '</tr>';
                }

            }

            result += '</table>';
            $("div#calendar").html(result);


            // 追加情報取得
            $.ajax({
                type: "POST",
                url: "./operation/get_gameplans_from_date.php",
                data: map,
            }).done(function(data){
                line = data.split("\n");

                for ( var i=0; i<line.length; i++ ){
                    if ( line[i] == "" ) continue;

                    sp = line[i].split("\t");

                    console.log(line[i]);
                    $("table#calendar").on("load", function(){
                        $("#d"+sp[3]).attr("background-color", "red");   //こいつを追加したい
                    });

                }

            });


        });

    }
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+2

単に

$("#d"+sp[3]).css("background-color", "red");


でいいんじゃないですか?
もうhtmlとして存在していて、何かを待つ必要はないですよね?

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/06/23 20:42

    ご回答有り難うございます。
    最初にそれを行ったのですが、どうも発火しなくて…
    それで探してきたのが.onなのです……

    キャンセル

  • 2016/06/23 21:05 編集

    発火とか不要です。

    見直したら、 attr となってますね。
    これを cssにすれば 動くんじゃないでしょうか。
    attr なら bgcolor ですか。

    キャンセル

  • 2016/06/23 21:26

    ご回答有り難うございます。
    bgcolorに直したところ、期待通りの動作になりました!
    ありがとうございました

    キャンセル

-1

on loadを期待するのであれば、htmlで追加する前に、一度jQueryオブジェクトに変えてonを登録したあとappend等で入れるとうまく発火すると思います。

var temp = $(result);
temp.on("load", function(e){

});
$("div#calendar").append(temp);

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/06/23 20:40

    ご回答有り難うございます。
    理解が悪くて申し訳ないのですが、以下のように修正しましたが発火していないようです…

    ※修正部のみ抜粋

    var temp = $(result);


    // ゲーム情報取得
    $.ajax({
    type: "POST",
    url: "./operation/get_gameplans_from_date.php",
    data: map,
    }).done(function(data){
    line = data.split("\n");

    for ( var i=0; i<line.length; i++ ){
    if ( line[i] == "" ) continue;

    sp = line[i].split("\t");

    console.log(line[i]);
    temp.on("load", function(e){
    $("#d"+sp[3]).attr("background-color", "red");
    });

    }

    });

    $("div#calendar").html(temp);
    alert(temp);


    これはどういうことを表しているのでしょうか?
    全てのデータを、変数resultに格納後、
    var temp = $(result)
    を行い、
    temp.on("load", function(e){
    $("#d"+sp[3]).attr("background-color", "red");
    });
    のようにすれば良いのでしょうか?

    キャンセル

  • 2016/06/24 00:01

    https://jsfiddle.net/ppzy8cu1/2/
    検証してみましたが、大変申し訳無いことに私の提示した方法では「tableのloadは検知できない」ということがわかりました。私の記憶ではimgはloadイベントが取れたのでtableもいけるやろと思っていましたが、そう甘くないようです。
    var temp = $(result)は、resultのHTMLタグをパースして内部のDOMにアクセスできるようになるので、追加前にイベントを登録できるようになります。上記動作テストはimgのonloadはキャッチできていますが、tableタグのloadはキャッチ出来ていません。
    とりあえずあなたがやりたいことはnoricyan2さんが叶えてくれたようなので、私の知識はおまけ程度に持って帰って下さい。

    キャンセル

  • 2016/06/24 15:46

    ご返信有り難うございます。

    いえいえ!対応していただきありがとうございます。
    まだまだ素人エンジニア見習い…くらいなので、追加知識など大変ありがたいです!
    これからもどうぞよろしくお願いいたします。

    キャンセル

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

  • ただいまの回答率 90.02%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる