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