17

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

});
4

5 回答 5

34

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

$('#yourContainer').on('click', '#approve', function(){
    //your code here..
});
于 2013-07-10T01:59:36.843 回答
14

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

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

$(document).on('click','#approve',function(){
//your code here
});
于 2017-08-22T05:01:57.717 回答
3

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

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

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

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

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

于 2019-07-01T13:40:10.020 回答
2

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

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'));
});
于 2013-07-10T02:27:56.820 回答
0

我不确定你到底在找什么。您可以使用 .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

所以这是我的演示

于 2020-04-08T19:06:45.250 回答