jQueryに関する質問です。セレクタによるクラスの指定がうまくいきません。

Question

ぷりっぷりのおしり

49

46もっと見る

90pt

コンピュータウェブ制作

jQueryに関する質問です。セレクタによるクラスの指定がうまくいきません。

解決方法をご教授ください。できれば、ソースをいただけるとありがたいです。
当方初級レベルです。

■実現したいこと
1.jQueryでclassを付加した要素を生成
2.そのclassをセレクタで指定し、クリックイベントを発生させる
※詳細はコメント欄のソースを参照してください

■問題
上記の2番がうまくいっていません。
1番はうまくいっているようです。
以下で配布されているブックマークレットで、
指定したい要素".test"を検索すると、期待通りの箇所がヒットします。
http://semooh.jp/jquery/ref/cont/selectors/

■問題が発生しているソース
表示されている文字列をクリックすることによって、
水平線の上と下で移動することを期待して書きました。
コメント欄に記載しましたが、インデントがつぶれてるかもしれません。お手数かけます。

回答の条件

1人2回まで

登録：2010/07/14 01:13:41
終了：2010/07/18 14:41:22

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

No.1

📦⛰️2471132010/07/14 01:37:20

25pt

$(this).remove();
$(this).clone(true).appendTo(text);

この箇所で、要素をコピーする前に消しちゃっているようです。

順番を入れ替えてみたら、クリックするたびに上下に行ったり来たりするようになりました。

$(this).clone(true).appendTo(text);
$(this).remove();

お礼が遅くなって申し訳ありません。

回答ありがとうございました。

思った通りの挙動になりました。

また、何かあった際はよろしくお願いいたします。

2010/07/18 14:32:14

No.3

Cherenkov15044932010/07/14 02:42:57

25pt

removeとcloneしている行を逆にすれば希望の動作になるかな。

ただ上下させるだけなら毎回生成しなくてもいいのでは。

$(function () {
  $(".test").click(function(){
    var self = $(this);
    (self.parent().attr('id') == "first") ? self.appendTo('#second') : self.appendTo('#first');
  });
});

お礼が遅くなって申し訳ありません。

回答ありがとうございました。

思った通りの挙動になりました。

また、何かあった際はよろしくお願いいたします。

2010/07/18 14:40:02

ぷりっぷりのおしり 2010/07/14 01:15:25

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".test").click(
function(){
switch($(this).closest("div").attr("id")){
case "first":
text = "#second";
break;
case "second":
text = "#first";
break;
}
$(this).remove();
$(this).clone(true).appendTo(text);
}
)
})
</script>
</head>
<body>
<div id='first'></div>
<hr>
<div id='second'>
<span class="test">hello<br></span>
<span class="test">good<br></span>
<span class="test">hoge<br></span>
</div>
</body>
</html>

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

y-kawaz · Accepted Answer · 2010-07-14T02:10:22+09:00

問題となっているのは多分cloneをappendしている点で、cloneで作られた要素は属性やタグの中身はコピーされますがイベントはコピーされない為、コピーされた要素ではclickで何も起きないんだと思います。

これを解決するにはクリックイベントとの登録に click 関数を使うのではなく、live関数を使うのが簡単で良いでしょう。

clickイベントの登録箇所を以下のように修正してみてください。

$(".test").live("click",
function(){
：
});

y-kawaz · Accepted Answer · 2010-07-14T02:10:22+09:00

問題となっているのは多分cloneをappendしている点で、cloneで作られた要素は属性やタグの中身はコピーされますがイベントはコピーされない為、コピーされた要素ではclickで何も起きないんだと思います。

これを解決するにはクリックイベントとの登録に click 関数を使うのではなく、live関数を使うのが簡単で良いでしょう。

clickイベントの登録箇所を以下のように修正してみてください。

$(".test").live("click",
function(){
：
});

jQueryに関する質問です。セレクタによるクラスの指定がうまくいきません。

ベストアンサー

y-kawaz14222262010/07/14 02:10:22

その他の回答（2件）

📦⛰️2471132010/07/14 01:37:20

y-kawaz14222262010/07/14 02:10:22ここでベストアンサー

Cherenkov15044932010/07/14 02:42:57

コメント（1件)

この質問への反応（ブックマークコメント）