JQuery: selezione di elementi creati dinamicamente e spinta a Firebase

Question

Principiante di tutto questo, giocando con Firebase. Fondamentalmente, voglio recuperare le voci di testo da Firebase e avere un pulsante "Approva" accanto ad esso. Quando si fa clic sul pulsante, voglio che quella specifica voce di testo venga trasferita in una nuova posizione di Firebase e il testo rimosso dalla pagina. Sto creando il pulsante e il testo in modo dinamico e sto avendo qualche problema con la selezione del pulsante e dei div che ho creato. So che devo usare su() ma non sono sicuro di come usarlo.

Grazie!

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

Bisogna legare .on() su un contenitore del vostro elemento aggiunto in modo dinamico che è già sulla pagina quando lo si carica, e hanno in questo modo:

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

Answer 2

Un'altra alternativa, più semplice da capire , meno potente, anche perfettamente valido, è quello di legare semplicemente l'evento, mentre si crea l'elemento:

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

Un altro problema che si sta andando a correre in, supponendo che non ci sarà più di uno di questi in una pagina, è che stai usando gli ID nei record. Stanno andando a scontrarsi se non sono unici.

Un'ottima alternativa è fare riferimento a questi articoli con tag data- * o altre caratteristiche identificative, come i tag css. Ma nel tuo caso, non ne hai affatto bisogno!

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

tuo .on() lavoro did't, perché si sta aggiungendo in modo dinamico pulsante. Non puoi trovare gli elementi aggiunti dinamicamente direttamente usando il selettore di quell'elemento come $('#approve'). Quindi devi associare .on() con il selettore $(document). Questo conterrà sempre i tuoi elementi aggiunti dinamicamente.

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

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