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を探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【VB.NET】HTML要素を取得しよ...
-
VC++のデバッガでvectorの要素...
-
デジタル時計の時刻合わせの方...
-
エクセルのシート上に別のシー...
-
マイページはどこを開くの
-
一定時間おきにアラームやポッ...
-
PDFを(htmlのように)無限に縦...
-
ウインドウを毎回同じ位置、大...
-
Excelでワードアートや図を常に...
-
【Android】ユーザー補助機能ボ...
-
Javascript_submit()完了後に処...
-
VBAで任意のウインドウのサイズ...
-
Youtubeが勝手に右下に勝手に小...
-
[Java] Edgeでのアドレスバー非...
-
スクリプトって、何ですか?ど...
-
Outlookでこのような表示がされ...
-
「Cancel = True」とはどういう...
-
小さな表示窓の呼び方は
-
Excel VBAでの右クリックのポッ...
-
ポップアップウィンドウがブロ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
VC++のデバッガでvectorの要素...
-
スプレッドシートのチェックボ...
-
WebサイトのHTMLオブジェクトの...
-
MFCを使って、ひとつのkey(CStr...
-
【VBA/HTML】特定のタグ要素に...
-
JavaScriptでクリップボードの...
-
【VB.NET】HTML要素を取得しよ...
-
PL/Iについて、教えてください。
-
JQuery、セレクトボックスをル...
-
(VBS) テキストファイル読込で...
-
VBA HTTPを用いたWEB画面の取...
-
IE等のブラウザにテキスト入...
-
フォームをリサイズ後に動作を行う
-
Ajax.Updaterで読み込んだ先の...
-
どこまでを動的に、どこまでを...
-
no confilict で value値が取れな
-
bxSliderで動画をスライドごと...
-
フローティングのやり方について
-
エクセルの散布図で選択してい...
-
デジタル時計の時刻合わせの方...
おすすめ情報