jqueryで動的に追加したDOM要素の操作について

Question

基本的なことになるかと思いますが下記で困っており、どなたかご教示ください。

jqueryのクリックイベント（.on("click",func)）の中に、.append()でDOM要素を追加するコードを書いているのですが、動的に増やした要素だけを指定して操作する方法についてご教示頂けますでしょうか？

            var Form = ".form"
            var newForm = $(Form).html();

            $(document).on("click",".btn",function() {
                $(Form).append(newForm); 
                });
//以下にappendされたnewFormを指定して、別の操作を行いたい。
            });

お手数ですがご確認宜しくお願い致します。

Answer 1

比較的自由に使えるdata-*形式でなんらかの属性を付加しておけばよいでしょう
jQueryからは.data()でアクセスできます

Comments

[YukihideKanda]

ありがとうございます！登録フォームを作ろうとしていたので、どしらにしろdata属性をつけなければならないと考えていましたので、非常に参考になりました。

Answer 2

$(function(){
    var Form = ".form"
    var newForm = $(Form).html();

    $(document).on("click",".btn",function() {
        $(newForm).appendTo(Form)... // $(newForm)に対してメソッドを繋げて書けます
    });
});

.append() ではなく .appendTo() を使うと、メソッドチェーンで繋げて書くことができます。
どんな処理をしたいかは分からないので出来ないこともあると思います…

Comments

[YukihideKanda]

ありがとうございます！まだ試してはいないですが、上記教えていただいたものは私のような初心者にとって（少なくとも私には）非常に使えそうな方法かと思います。

ぜひ試して見たいと思います！