※ ChatGPTを利用し、要約された質問です（原文：Ajax.Updaterで読み込んだ先の要素にイベントを設定したい）
Ajax.Updaterで要素にイベントを設定する方法
このQ&Aのポイント
Ajaxの勉強をしている中で、Ajax.Updaterを使用して要素を書き換えた後にイベントを設定する方法がわかりません。
具体的には、test2.htmlから取得した要素に対してイベントを設定したいのですが、うまく動作しません。
質問者は、targ3の要素に対してクリックイベントを設定したいと考えていますが、イベントが実行されません。
Ajax.Updaterで読み込んだ先の要素にイベントを設定したい
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>
お礼
回答ありがとうございました。 提示していただいた方法ではうまくいかなかったのですが、 回答者様の助言がヒントになり、 イベントの追加をtest2.html側で行って、 イベントの呼び出しをtest1.html側で行うという方法で無事実行することができました。