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

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

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

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

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

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2010/07/14 01:13:41
  • 終了:2010/07/18 14:41:22

ベストアンサー

id:y-kawaz No.2

y-kawaz回答回数1421ベストアンサー獲得回数2262010/07/14 02:10:22

ポイント40pt

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

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

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

$(".test").live("click",
function(){});
id:puriketu99

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

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

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

イベントのコピーについての知識がなかったので調べてみたいと思います。

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

2010/07/18 14:40:14

その他の回答(2件)

id:pacochi No.1

ぱこち回答回数247ベストアンサー獲得回数1122010/07/14 01:37:20

ポイント25pt
$(this).remove();
$(this).clone(true).appendTo(text);

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

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

$(this).clone(true).appendTo(text);
$(this).remove();
id:puriketu99

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

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

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

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

2010/07/18 14:32:14
id:y-kawaz No.2

y-kawaz回答回数1421ベストアンサー獲得回数2262010/07/14 02:10:22ここでベストアンサー

ポイント40pt

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

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

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

$(".test").live("click",
function(){});
id:puriketu99

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

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

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

イベントのコピーについての知識がなかったので調べてみたいと思います。

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

2010/07/18 14:40:14
id:Cherenkov No.3

Cherenkov回答回数1503ベストアンサー獲得回数4932010/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');
  });
});
id:puriketu99

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

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

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

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

2010/07/18 14:40:02
  • id:puriketu99
    <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>

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません