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

【问题标题】：JQuery: Selecting dynamically created elements and pushing to FirebaseJQuery：选择动态创建的元素并推送到 Firebase
【发布时间】：2013-07-07 19:52:27
【问题描述】：

所有这一切的初学者，使用 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();

});

【问题讨论】：

标签： jquery firebase dynamically-generated

【解决方案1】：

您必须将.on() 绑定到加载时已在页面上的动态添加元素的容器上，并使其如下所示：

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

【讨论】：

展开，on() 的第一个参数是事件，第二个参数是“选择器”，如果存在，则将事件委托给该元素的子元素，即使它们被添加到未来
在花了 3 个多小时寻找这个黑客之后，这对我有用！先生，您应该获得奖牌！
现在，如果你有一堆链接，你怎么做？每个链接都需要？

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

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

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

这适用于turning the DOM object directly into a selector。我喜欢它，因为这种方法在操作/意图上是透明的。

【讨论】：

$(document.getElementById("mynewthing"))... 大写 i

【解决方案4】：

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

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

假设一个页面上会有多个这些，您将遇到的另一个问题是您在记录中使用了 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'));
});

【讨论】：

我不同意这更容易理解，并且当正确绑定 .on() 命令时它似乎不必要的复杂会正常工作。

【解决方案5】：

我不确定您到底在寻找什么。您可以使用 .find() 动态选择元素。我认为 .find() 会再次查看 html 结构以获取所需的元素。

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

或者

$(".parentContainer").find(".dynamically-child-element").html("Hello world"); // not in click event

这是我的demo

【讨论】：