JQuery:选择动态创建的元素并推送到Firebase

初学者到这一切,玩Firebase。 基本上,我想从Firebase检索文本条目,并在其旁边有一个“批准”按钮。 单击该按钮时,我希望将该特定文本条目推送到新的Firebase位置,并从页面中删除该文本。 我正在动态创建按钮和文本,我在选择按钮和我创建的div时遇到了一些麻烦。 我知道我必须使用on(),但我不确定如何使用它。

谢谢!

approveRef.on('child_added', function(snapshot) { var posts = snapshot.val(); $('
').text(posts.text).append('').appendTo($('#feed')); }); $('#approve').on("click", function(){ var text = $('#post').val(); postsRef.push({'text':text}); $('#post').remove(); });

你必须在加载它时已经在页面上的动态添加元素的容器上绑定.on() ,并且像这样:

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

您的.on()无效,因为您正在动态添加按钮。 您无法直接使用元素id选择器(如$('#approve')找到动态添加的元素。 所以你应该将.on()绑定到$(document)选择器。 这将始终包含您动态添加的元素。

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

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

另一种替代方法,更简单易懂,function更强大,也非常有效,是在创建元素时简单地绑定事件:

 approveRef.on('child_added', function(snapshot) { var posts = snapshot.val(); var $button = $(''); $button.on("click", function(){ var text = $('#post').val(); postsRef.push({'text':text}); $('#post').remove(); }); $('
').text(posts.text).append($button).appendTo($('#feed')); });

如果您在页面上存在多个问题,那么您将要遇到的另一个问题是您在记录中使用ID。 如果它们不是唯一的,它们会发生冲突。

一个很好的选择是使用data- *标签或其他识别特征(例如css标签)来引用这些项目。 但在你的情况下,你根本不需要它们!

 approveRef.on('child_added', function(snapshot) { var posts = snapshot.val(); var id = snapshot.name(); var $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 */ $('
').text(posts.text).append($button).appendTo($('#feed')); });