JQuery：動的に作成された要素を選択してFirebaseにプッシュ

Question

初心者であれば、Firebaseを使い始めることができます。基本的には、Firebaseからテキストエントリを取得し、隣に「承認」ボタンがあります。ボタンをクリックすると、その特定のテキストエントリが新しいFirebaseの場所にプッシュされ、テキストがページから削除されます。私は、ボタンとテキストを動的に作成しています。作成したボタンとdivを選択する際に問題があります。私はon（）を使わなければならないが、それを使う方法がわからない。

ありがとうございます！

あなたはそれをロードするときページに既にあるあなたの動的に追加された要素のコンテナに .on()を結合し、このようにそれを持っている必要が

approveRef.on('child_added', function(snapshot) { 
var posts = snapshot.val(); 
$('<div id="post">').text(posts.text).append('<button style ="button" id="approve">Approve</button>').appendTo($('#feed')); 
}); 

$('#approve').on("click", function(){ 
    var text = $('#post').val(); 
    postsRef.push({'text':text}); 
    $('#post').remove(); 

}); 

Answer 1

：

$('#yourContainer').on('click', '#approve', function(){ 
    //your code here.. 
}); 

Answer 2

別の方法として、理解が簡単、それほど強力で、また完全に有効、あなたが要素を作成しながら、単純にイベントをバインドすることです：あなたはそこに仮定して、に実行しようとしている

approveRef.on('child_added', function(snapshot) { 
var posts = snapshot.val(); 
var $button = $('<button style ="button" id="approve">Approve</button>'); 
$button.on("click", function(){ 
    var text = $('#post').val(); 
    postsRef.push({'text':text}); 
    $('#post').remove(); 
}); 

$('<div id="post">').text(posts.text).append($button).appendTo($('#feed')); 
}); 

別の問題これらのページの1つ以上が、レコード内にIDを使用していることになります。彼らは一意でなければ衝突するだろう。

これらの項目をdata- *タグまたはcssタグなどの他の識別特性で参照することをお勧めします。しかし、あなたのケースでは、それらはまったく必要ありません！

approveRef.on('child_added', function(snapshot) { 
var posts = snapshot.val(); 
var id = snapshot.name(); 

var $button = $('<button style="button">Approve</button>'); 
$button.on("click", function(){ 
    // use parent.closest(...) in place of an ID here! 
    var text = $(this).parent().closest('textarea').val(); 
    postsRef.push({'text':text}); 
    $(this).parent().remove(); 
}); 

/* just an example of how to use a data-* tag; I could now refer to this element using: 
    $('#feed').find('[data-record="'+id+'"]') if I needed to find it */ 
$('<div data-record="'+id+'">').text(posts.text).append($button).appendTo($('#feed')); 
}); 

Answer 3

.on()は、ボタンを動的に追加しているため機能しませんでした。 $('#approve')のような要素idセレクタを使用して、動的に追加された要素を直接見つけることはできません。だから、 .on()を$(document)セレクタでバインドする必要があります。これには常に動的に追加された要素が含まれます。

$(document).on(eventName, selector, function(){});

$(document).on(click,'#approve',function(){ 
//your code here 
})