JQuery: Wybór dynamicznie tworzonych elementów i przejście do Firebase

Question

Początek wszystkiego, zabawa z Firebase. Zasadniczo chcę pobierać wpisy tekstowe z Firebase i mieć przycisk "Zatwierdź" obok. Po kliknięciu przycisku chcę, aby ten konkretny wpis tekstowy został przesunięty do nowej lokalizacji Bazy Firebase i tekstu usuniętego ze strony. Tworzę przycisk i tekst dynamicznie i mam problem z wybraniem przycisku i utworzonych elementów div. Wiem, że muszę użyć on(), ale nie jestem pewien, jak z niego korzystać.

Dzięki!

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

Trzeba związać .on() na pojemniku swojego dynamicznie dodatkowy element, który jest już na stronie, kiedy go załadować, i to w ten sposób:

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

Answer 2

Inną alternatywą, prostsze do zrozumienia mniej wydajne, doskonale ważna, jest po prostu powiązać zdarzenie podczas tworzenia elementu:

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')); 
}); 

Innym problemem będziesz napotkasz, zakładając, że będzie więcej niż jeden z nich na stronie, jest to, że używasz identyfikatorów w rekordach. Będą się ścierać, jeśli nie będą wyjątkowe.

Doskonałym rozwiązaniem jest odnoszenie się do tych elementów za pomocą znaczników danych * lub innych charakterystycznych cech, takich jak znaczniki css. Ale w twoim przypadku wcale ich nie potrzebujesz!

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

Twój .on() nie zadziałał, ponieważ dodajesz przycisk dynamicznie. Nie można znaleźć dynamicznie dodanych elementów bezpośrednio za pomocą selektora identyfikatorów elementów, takich jak $('#approve'). Dlatego należy wybrać bind .on() z selektorem $(document). To zawsze będzie zawierało Twoje dynamicznie dodawane elementy.

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

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