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

Question

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

谢谢!

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

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

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

Answer 2

你.on()没有工作,因为你是动态添加按钮.你无法直接使用那些元素id选择器找到动态添加的元素$('#approve').所以你应该.on()与$(document)选择器绑定.这将始终包含您动态添加的元素.

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

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

Answer 3

我发现快速了解 DOM，然后再运行回 jQuery 对于这个问题来说非常方便：

// Construct some new DOM element.
$(whatever).html('... id="mynewthing"...');

// This won't work...
$("#mynewthing")...

// But this will...
$(document.getElementById("mynewthing"))...

这是通过将 DOM 对象直接转换为选择器来实现的。我喜欢它，因为这种方法在操作/意图上是透明的。