Ajaxの勉強をしているのですが、非同期通信で要素を書き換えた後の処理について困っています。現在、prototype.jsのAjax.Updaterを利用して下記のようなソースを書き、動作の検証を行っているのですが、読み込み元のファイル(test.1html)から読み込んだ先(test2.html)の要素を取得することは出来ても、その要素に対してイベントを設定することが出来ません。具体的に言うと、 targ2の要素をクリックすると、test2.html内のtarg3の要素を取得出来てアラートが走りますが、targ3の要素をクリックしてもイベントが実行されないという状況です。このtarg3の要素に対してイベントを設定するにはどのようにすれば良いでしょうか？ ○test1.html Ajaxtest 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); } 押して非同期通信開始非同期通信終了後に押す ○test2.html Ajaxtest 非同期通信で呼ばれた要素

Ajax.Updaterで読み込んだ先の要素にイベントを設定したい

解決済

質問者：hagimiya
質問日時：2009/12/18 01:00
回答数：1件

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>