すたらSample

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

2012/08/09

<div class="clone">
    <button>button</button>
    <input>
</div>

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

$('.clone button').click(function() {
    alert($(this).parent().children('input').val());
});

var p1 = $('.clone');
$(p1).children('button').click(function() {
    alert($(p1).children('input').val());
});

(function($) {
    $.fn.click2 = function() {
        return this.each(function() {
            var p2 = this;
            $(p2).children('button').click(function() {
                alert($(p2).children('input').val());
            });
        });
    };
})(jQuery);
$('.clone').click2();