(jQuery)要素にイベントを設定する際、"clone(true)"に備える。

プログラミング

"clone()"で要素をコピーし、
"clone(true)"で、さらにイベントも引き続ことができます。


【参考】
clone(true) - jQuery 日本語リファレンス
http://semooh.jp/jquery/api/manipulation/clone/true/


で、下記のようなHTMLソースがあるとします。



<div class="clone">

    <button>button</button>

    <input>

</div>
ボタンをクリックしたら、となりのテキストボックスの値をアラートで表示するようにイベントを設定するとします。
その際、イベントの挙動も含めて正しく複製するにはどうしたらいいでしょう?
"clone(true)"でイベントも複製するのなら、そのイベントの中で使う要素は
すべて"this"から辿って指定しなければなりません。


つまり、こうなります。
【成功】



$('.clone button').click(function() {

    alert($(this).parent().children('input').val());

});



【実験ページ】
http://www.usamimi.info/~sutara/sample/clone_test.php


記述をすっきりさせようとして、イベント設定の外で作った変数に要素を格納していて、それをイベントの中で使ったら、ボタンを押しても隣のテキストボックスではなく、一番目のテキストボックスの値を参照してしまいます。
【失敗】



var p1 = $('.clone');

$(p1).children('button').click(function() {

    alert($(p1).children('input').val());

});
下記のように、イベント設定の中で定義した変数ならば問題ありません。
当然、"this"から辿って指定しなければなりませんが。
【成功】


$('.clone button').children('button').click(function() {

    var p1 = $(this).parent();

    alert($(p1).children('input').val());

});


これは、jQueryプラグインなど、他人に再利用してもらうコードを書く場合に注意すべきだと思います。
自分はイベントを設定したその要素を複製するつもりなどなくても、他の人は"clone(true)"したいと思うかもしれません。


…って、これって常識だったんでしょうか?
まあ…、少なくとも私は、自身が公開しているjQueryプラグインを、これから総点検&修正しなければなりませんorz


気をつけなければならないのは、イベント関数の中で別の関数を呼び出していて、
そちらでもHTML要素を扱っている場合、当然、HTML要素を指定する際には
イベントが発火した要素(this)を基準にしなくてはなりません。
…これは…、大幅な修正作業が必要な予感…。