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

这一切的初学者，玩转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();

});

approveRef.on（'child_added'，函数（快照）{
var posts=snapshot.val（）；
$（''）.text（posts.text）.append（'Approve'）.appendTo（$（'feed'））；
});
$（“#批准”）。在（“单击”，函数（）上）{
var text=$（'#post'）.val（）；
push（{'text'：text}）；
$（'#post'）。删除（）；
});

加载时，必须将

.on（）

绑定到页面上已动态添加元素的容器上，并按如下方式进行：

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

---

另一种更容易理解、功能更弱、也完全有效的方法是在创建元素时简单地绑定事件：

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

approveRef.on（'child_added'，函数（快照）{
var posts=snapshot.val（）；
var$按钮=$（'Approve'）；
$button.on（“单击”，函数（）{
var text=$（'#post'）.val（）；
push（{'text'：text}）；
$（'#post'）。删除（）；
});
$（''）.text（posts.text）.append（$按钮）.appendTo（$（'#提要'）；
});

假设一个页面上有多个ID，您将遇到的另一个问题是您在记录中使用ID。如果它们不是独一无二的，它们就会发生冲突

一个很好的替代方法是使用data-*标记或其他识别特征（如css标记）引用这些项。但在你的情况下，你根本不需要它们

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

approveRef.on（'child_added'，函数（快照）{
var posts=snapshot.val（）；
var id=snapshot.name（）；
var$按钮=$（'Approve'）；
$button.on（“单击”，函数（）{
//在此处使用parent.closest（…）代替ID！
var text=$（this.parent（）.closest（'textarea'）.val（）；
push（{'text'：text}）；
$（this.parent（）.remove（）；
});
/*这只是一个如何使用data-*标记的示例；我现在可以使用以下方法引用此元素：
$（'#feed'）。如果需要查找它，请查找（'[data record=“'+id+'']”）*/
$（''）.text（posts.text）.append（$按钮）.appendTo（$（'#提要'）；
});

您的

.on（）

无法工作，因为您正在动态添加按钮。使用元素id选择器（如

$（'#approve'）

）无法直接找到动态添加的元素。所以你应该 用

$（文档）

选择器绑定

.on（）

。这将始终包含动态添加的元素

$("#button").click(function(e){
   $(".parentContainer").find(".dynamically-child-element").html("Hello world");
});

$（document）.on（eventName，selector，function（）{}）

我发现快速浏览DOM，然后运行回jQuery对于解决这个问题非常方便：

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

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

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

这是我的工作方式。我喜欢它，因为这种方法在操作/意图上是透明的。
我不确定你到底在寻找什么。可以使用.find（）动态选择元素。我认为.find（）将再次查看html结构以获取所需的元素

$("#button").click(function(e){
   $(".parentContainer").find(".dynamically-child-element").html("Hello world");
});

或

这是我要展开的
，on（）的第一个参数是事件，第二个参数是“选择器”，如果存在，它会将事件委托给此元素的子元素，即使它们是在将来添加的。这对我来说是在花了3个多小时寻找此破解之后才生效的！先生，你应该得到一枚奖章！我不认为这更容易理解，而且当正确绑定.on（）命令时，它似乎不必要地复杂，可以正常工作。$（document.getElementById（“mynewthing”）。。。大写字母i
$(".parentContainer").find(".dynamically-child-element").html("Hello world"); // not in click event