JQuery: Auswahl dynamisch erstellten Elemente und drückt

Question

Anfänger, um all dies zu Feuerbasis, mit Firebase herum spielen. Grundsätzlich möchte ich Texteinträge von Firebase abrufen und eine Schaltfläche "Genehmigen" daneben haben. Wenn auf die Schaltfläche geklickt wird, möchte ich, dass dieser bestimmte Texteintrag an einen neuen Firebase-Speicherort verschoben und der Text von der Seite entfernt wird. Ich erstelle die Schaltfläche und den Text dynamisch und ich habe einige Probleme mit der Auswahl der Schaltfläche und der divs, die ich erstellt habe. Ich weiß, ich muss auf() verwenden, aber ich bin unsicher, wie man es benutzt.

Danke!

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

Sie haben .on() auf einem Behälter Ihrer dynamisch hinzugefügt Element zu binden, die bereits auf der Seite ist, wenn Sie es laden, und haben es wie folgt aus:

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

Answer 2

Eine weitere Alternative, einfacher zu verstehen , weniger leistungsfähig, auch perfekt gültig ist, ist einfach das Ereignis zu binden, während Sie das Element erstellen:

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

Ein weiteres Problem, das Sie über den Weg laufen werden, vorausgesetzt, es Wird auf einer Seite mehr als eine davon angezeigt, verwenden Sie IDs in den Datensätzen. Sie werden kollidieren, wenn sie nicht einzigartig sind.

Eine gute Alternative ist die Bezugnahme auf diese Elemente mit Data * Tags oder anderen identifizierenden Eigenschaften wie css-Tags. Aber in Ihrem Fall brauchen Sie sie überhaupt nicht!

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

Ihre .on() funktioniert nicht, weil Sie Button dynamisch hinzufügen. Sie können die dynamisch hinzugefügten Elemente nicht direkt mit diesem Element-ID-Selektor wie $('#approve') finden. So sollten Sie .on() mit $(document) Selektor binden. Dies wird immer Ihre dynamisch hinzugefügten Elemente enthalten.

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

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