Ajaxの勉強をしているのですが、非同期通信で要素を書き換えた後の処理について困っています。
現在、prototype.jsのAjax.Updaterを利用して下記のようなソースを書き、動作の検証を行っているのですが、読み込み元のファイル(test.1html)から読み込んだ先(test2.html)の要素を取得することは出来ても、その要素に対してイベントを設定することが出来ません。
具体的に言うと、
targ2の要素をクリックすると、test2.html内のtarg3の要素を取得出来てアラートが走りますが、targ3の要素をクリックしてもイベントが実行されないという状況です。
このtarg3の要素に対してイベントを設定するにはどのようにすれば良いでしょうか?
○test1.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajaxtest</title>
<script src="prototype.js"></script>
<script>
window.onload=function(){
Event.observe('targ1', 'click', handler1);
Event.observe('targ2', 'click', handler2);
Event.observe('targ3', 'click', handler3);
}
function handler1() {
var myajax = new Ajax.Updater(
{success : "targetString"},
"test2.html",
{evalScripts:true});
}
function handler2() {
alert($('targ3').innerHTML);
}
function handler3() {
alert($('targ3').innerHTML);
}
</script>
</head>
<body>
<div id="targ1">押して非同期通信開始</div>
<div id="targ2">非同期通信終了後に押す</div>
<div id="targetString"></div>
</body>
</html>
○test2.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajaxtest</title>
</head>
<body>
<div id="targ3">非同期通信で呼ばれた要素</div>
</body>
</html>
No.1ベストアンサー
- 回答日時:
prototype.jsは使ってないので間違ってるかもしれませんが、
window.onloadの時実行している
Event.observe('targ3', 'click', handler3);
はonloadの時点では、まだ存在しないのでイベントのバインドが
できてないからではないでしょうか?
ajaxしてtarg3を作った後にイベント登録すればよいのではないかと
function handler1() {
var myajax = new Ajax.Updater(
{success : "targetString"},
"test2.html",
{evalScripts:true});
Event.observe('targ3', 'click', handler3);
}
回答ありがとうございました。
提示していただいた方法ではうまくいかなかったのですが、
回答者様の助言がヒントになり、
イベントの追加をtest2.html側で行って、
イベントの呼び出しをtest1.html側で行うという方法で無事実行することができました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
(VBS) テキストファイル読込で...
-
no confilict で value値が取れな
-
スプレッドシートのチェックボ...
-
JQuery、セレクトボックスをル...
-
マイページはどこを開くの
-
ウインドウを毎回同じ位置、大...
-
VBA ポップアップが表示された...
-
デジタル時計の時刻合わせの方...
-
エクセルのシート上に別のシー...
-
一定時間おきにアラームやポッ...
-
別フォームから戻ったときのイ...
-
Javascript_submit()完了後に処...
-
ポップアップウィンドウがブロ...
-
[Java] Edgeでのアドレスバー非...
-
エクセルVBAでフォームのListbo...
-
ウィンドウの2重起動を防止したい
-
Excelでワードアートや図を常に...
-
「Cancel = True」とはどういう...
-
小さな表示窓の呼び方は
-
インタネットからPDFファイルだ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ajax
-
VC++のデバッガでvectorの要素...
-
(VBS) テキストファイル読込で...
-
PL/Iについて、教えてください。
-
WebサイトのHTMLオブジェクトの...
-
JQuery、セレクトボックスをル...
-
VBA HTTPを用いたWEB画面の取...
-
【VB.NET】HTML要素を取得しよ...
-
モーダルウィンドウにおける処...
-
AJAXでのinputもしくはoptionな...
-
どこまでを動的に、どこまでを...
-
[C++] vector<string> の各要素...
-
MFCを使って、ひとつのkey(CStr...
-
JavaScriptでクリップボードの...
-
【VBA/HTML】特定のタグ要素に...
-
スプレッドシートのチェックボ...
-
ファンクションキーの既存の機...
-
bxSliderで動画をスライドごと...
-
エクセルでタグの内容が取得で...
-
マイページはどこを開くの
おすすめ情報