![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
ajaxを利用して追加したhtmlに対して、既存のscriptのイベントが効かなくて困っています。
どういうことかというと、
まず流れとしては、
(1)【webページをブラウザで表示】
↓
(2)【ajax通信でサーバーサイドでビュー(html)を生成】
↓
(3)【ブラウザにそのビューを返して、それをjavascriptで既存のhtmlに追加】
となっております。
そして、この時、例えば、(1)の時にclass="sample"の要素に対してclickイベントを設定していて、(3)の時に追加された要素にもclass="sample"があったとします。
この時、新たに追加されたclass="sample"の要素に対してclickイベントが発生しないのです。
どなたか、解決策を教えてくれないでしょうか?
宜しくお願い致します。
No.2
- 回答日時:
方法3
clickイベントは伝播するので、個々のclass="sample"要素に設定せずに、上位要素(documentなど)でイベントを監視し、発生元がclass="sample"の要素であったら処理をするようなイベント処理にする。 (ANo1様の方法2とほぼ同じ効果になります)
<極簡単なサンプル>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
/*@cc_on@*/
document./*@if(1)attachEvent("on"+@else@*/addEventListener(/*@end@*/"click", function(evt){
var t = evt./*@if(1)srcElement@else@*/target/*@end@*/;
if(t.className === "sample"){
//必要な処理。例えば…
alert("イベント発生");
}
}, false);
</script>
</head>
<body>
<p class="sample">元からある対象要素</p>
<p>ここは関係ない</p>
<div>例えばここにあとから追加する</div>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【VBA/HTML】特定のタグ要素に...
-
ajaxで追加したdom要素にscript...
-
デジタル時計の時刻合わせの方...
-
マイページはどこを開くの
-
スクリプトって、何ですか?ど...
-
一定時間おきにアラームやポッ...
-
エクセルのシート上に別のシー...
-
Javascript_submit()完了後に処...
-
[Java] Edgeでのアドレスバー非...
-
Excelでワードアートや図を常に...
-
リトルバスターズEXを中古で購...
-
小さな表示窓の呼び方は
-
Youtubeが勝手に右下に勝手に小...
-
ウイルスバスターの契約更新に...
-
「Cancel = True」とはどういう...
-
Excel操作 ウィンドウで出した...
-
Chromeは何で進むボタンが無いの?
-
どうして+3
-
Outlookでこのような表示がされ...
-
画面を開かずに値を取得
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
PL/Iについて、教えてください。
-
MFCを使って、ひとつのkey(CStr...
-
(VBS) テキストファイル読込で...
-
【VBA/HTML】特定のタグ要素に...
-
VC++のデバッガでvectorの要素...
-
jQueryで<body>要素にマウスが...
-
ajaxで追加したdom要素にscript...
-
JQuery、セレクトボックスをル...
-
エクセルでタグの内容が取得で...
-
ファンクションキーの既存の機...
-
【VB.NET】HTML要素を取得しよ...
-
IE等のブラウザにテキスト入...
-
JavaScriptでクリップボードの...
-
フローティングのやり方について
-
デジタル時計の時刻合わせの方...
-
マイページはどこを開くの
-
ウインドウを毎回同じ位置、大...
-
エクセルのシート上に別のシー...
-
Javascript_submit()完了後に処...
-
Excelでワードアートや図を常に...
おすすめ情報