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

Question

質問概要

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");   //こいつを追加したい
					});

				}

			});


		});

	}

Answer 1

単に

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

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

Comments

[nnahito]

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

[退会済みユーザー]

発火とか不要です。

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

[nnahito]

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

Answer 2

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

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

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

Comments

[nnahito]

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

※修正部のみ抜粋

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");
});
のようにすれば良いのでしょうか？

[masaya_ohashi]

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

[nnahito]

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

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