web-dev-qa-db-ja.com

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

Firebaseをいじって、これらすべての初心者。基本的に、Firebaseからテキストエントリを取得し、その横に[承認]ボタンを配置します。ボタンがクリックされたら、その特定のテキストエントリを新しいFirebaseの場所にプッシュし、テキストをページから削除します。ボタンとテキストを動的に作成していますが、作成したボタンとdivの選択に問題があります。 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();

});
jqueryfirebasedynamically-generated
12
Sam

動的に追加された要素のコンテナに.on()をバインドする必要があります。これは、ページをロードするときに既に存在しており、次のようになります。

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

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

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

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

もう1つの代替方法は、理解しやすく、強力ではなく、完全に有効ですが、要素を作成するときにイベントをバインドするだけです。

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つのページにこれらが複数あると想定した場合に遭遇するもう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'));
});
2
Kato

私はDOMにすばやくアクセスし、jQueryに戻ると、この問題に非常に便利です。

// Construct some new DOM element.
$(whatever).html('... id="mynewthing"...');

// This won't work...
$("#mynewthing")...

// But this will...
$(document.getElementByid("mynewthing"))...

これは DOMオブジェクトを直接セレクターに変換する によって機能します。アプローチが操作/目的で透過的であるため、私はそれが好きです。

0
Shaheed Haque

何を探しているのか正確にはわかりません。 .find（）を使用して、動的に要素を選択できます。 .find（）は必要な要素を取得するためにhtml構造をもう一度見ると思います。

$("#button").click(function(e){
   $(".parentContainer").find(".dynamically-child-element").html("Hello world");
});

または

$(".parentContainer").find(".dynamically-child-element").html("Hello world"); // not in click event

これが私の デモ です

0
QDinh