解決済み

jQueryのappendで追加したdivにclickイベント

  • すぐに回答を!
  • 質問No.4793941
  • 閲覧数6275
  • ありがとう数1
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 37% (10/27)

jQueryのappendで追加したdivにclickイベントは使用できるのでしょうか?
具体的には、
-------------------------------------------------------
$(".class").append("<div class=test></div>");

$(function(){
$("div.test").click(function(){
this.style.backgroundImage = "url(./img/test.gif)";
});
});
-------------------------------------------------------
という処理をしたいのですが、うまくできません。
最初からあるdivでは正常に動作するので、appendで後付したからだと思います。
これをうまく行う方法はないでしょうか?

分かりにくい説明で恐縮ですが、ご回答宜しくお願いいたします。

質問者が選んだベストアンサー

  • 回答No.3

ベストアンサー率 61% (1594/2576)

No1です。

>ただ、.testに対して実行されるタイミングでは確実にappendされて
>います。
それだったら、こういう(↓)記述にはらないのでは?
>$(function(){
>$("div.test").click(function(){  ~~~


クリックしてappendし、その後クリックすれば背景が変わる例。
(No2でも書いたように、クリックするたびにappendされます。)
<html>
<head>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript"><!--
function app(){
$(".class").append("<div class=test style=\"height:100;\">test word</div>");
$("div.test").click(function(){
this.style.backgroundImage = "url(./img/test.gif)";
});
}
// --></script>
</head>
<body>
<div class="class">here</div>
<button onclick="app()">append実行</button>
</body>
</html>
Be MORE 7・12 OK-チップでイイコトはじまる

その他の回答 (全2件)

  • 回答No.2

ベストアンサー率 61% (1594/2576)

スクリプト全体の構成が不明なので、よくわかりませんが…

>>質問文で気になるのが、appendのタイミング。
というのは
>$(".class").append("<div class=test></div>");
が実行されるのは、どの様なタイミングで、そのときに$(".class")が確実に存在しているかということです。

>appendのタイミングですが、click()でユーザがあるDIVをクリックしたタイ
>ミングで.classをappendしています
「.classをappend」の意味がわかりませんが、上記の
「$(".class").append("<div class=test></div>");」が、クリックの処理の中で実行されるのでしょうか? 何回もクリックすると、その数だけ増えるようになっているということ?

>やはりページロード時に存在しないdivでは動作しないのでしょうか?
質問の意味がわかりかねますが、存在しないオブジェクトに対して、何かを実行しようとしても、オブジェクトが特定できないので、実行できません。
(エラー表示するかどうかなどは、ブラウザにより違うみたい)

>>という処理をしたいのですが、うまくできません
そもそも、どううまくいかないのでしょうか?
(例えば、appendした<div>が正しく生成されているかどうかなどを、確認してみましたか?)
回答No1で実行できているのは、確認されましたか?
それとはどのように違うのですか?
補足コメント
tonpei3631

お礼率 37% (10/27)

質問が分かりづらくてすみません。。。

>>$(".class").append("<div class=test></div>");
が実行されるタイミングでは.classは確実に存在しています。

>「.classをappend」の意味がわかりませんが、
すみません。間違えました。
正しくは「.classに.testをappend」しています。

>質問の意味がわかりかねますが、存在しないオブジェクトに対して、何かを実行しようとしても、オブジェクトが特定できないので、実行できません。
ページロード時には、.testが存在しないのですが、あるタイミングで.classに.testがappendされます。ただ、.testに対して実行されるタイミングでは確実にappendされています。

>回答No1で実行できているのは、確認されましたか?
確認しました。
ページロード直後にappendでオブジェクトを追加した時には動作するようです。しかし、click()などを使って後から追加したオブジェクトでは動作しないようです。これをどうにかして後から追加したオブジェクトで動作させたいのですが、、、

>appendした<div>が正しく生成されているかどうかなどを、確認してみましたか?
<div>は正しく生成されています。

理解不足で申し訳御座いませんが、宜しくお願いいたします。
投稿日時 - 2009-03-17 11:35:18
  • 回答No.1

ベストアンサー率 61% (1594/2576)

jQueryはほとんど知りませんが… できないはずはないと思います。

$(function) のタイミングはDOM構築前に実行されるという記事があったので、そのせいかとも思いましたが、
 http://kawa.at.webry.info/200801/article_15.html

実験してみたところ、以下でもちゃんと動作するみたい。
<html>
<head>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript"><!--
//$(document).ready(function(){

$(function(){
$(".class").append("<div class=test>test word</div>");
$("div.test").click(function(){
this.style.backgroundImage = "url(./img/test.gif)";
});
});
// --></script>
</head>
<body>
<div>start</div>
<div class="class">here</div>
<div>end</div>
</body>
</html>

質問文で気になるのが、appendのタイミング。
読込みとの関係で、.classが無いと実行しようがないけれど…?
補足コメント
tonpei3631

お礼率 37% (10/27)

ご回答ありがとうございます。検証までしていただいて感謝です!

appendのタイミングですが、click()でユーザがあるDIVをクリックしたタイミングで.classをappendしています。なので、ページロード時には.classは存在しないです。

ただ、$("div.test").click(function(){ が実行されるタイミングでは、.classが必ずappendされています。

やはりページロード時に存在しないdivでは動作しないのでしょうか?
たびたびすみませんが、ご回答の程宜しくお願いいたします。
投稿日時 - 2009-03-16 11:32:58
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


より良い社会へ。感謝経済プロジェクト始動

ピックアップ

ページ先頭へ