jauery ui dialog 読み込んだ外部htmlファイル内での
jauery ui dialog 読み込んだ外部htmlファイル内でのjqueryの実行
お世話になります。
iwatuturuturu と申します。
jqueryで読み込んだ外部htmlファイル内でのjqueryのセレクターを使用した装飾等ができません。
[index.html]にてjqueryのloadを使用し、同じ階層内の[text.html]のファイルを読み、それをjQuery uiを使用したdialogで表示させています。
読み込まれたdialog内の要素に装飾を行ないたいと考えておりますが、下記のソースにあります[$("p").css("background-color", "red");]が読み込まれたタイミングで、[$("p")]が読み込まれていない為か背景色の変更が行えません。(jqueryを使用し、テーブルの行を一行毎に色付けをしたりしたいのでこのような質問にしました。)
loadなどで外部ファイルを読み込んで、読み込まれた要素にjqueryによる装飾や操作を行いたい場合はどのようなやり方があるのでしょうか?
【ソース[index.html]】------------------------
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="../css/common/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
/* dialogを読み込む領域を作成 */
$("body").append("<div id='dialog_window'></div>");
/* loadで外部htmlファイルの読み込み */
$("div#dialog_window").load("text.html");
/* loadで読み込まれたhtmlファイルをdialogとして表示 */
$("div#dialog_window").dialog({
autoOpen: true,
width: 1100,
});
/* dialog内の装飾 */
$("p").css("background-color", "red");
});
});
</script>
</head>
<body>
<button>ウィンドウopen</button>
</div>
</body>
</html>
【ソース[text.html]】------------------------
<p>読み込み完了</p>
------------------------------------
よろしくお願いいたします。
お礼
解決できました。ご回答ありがとうございました。