Question

我成功从Firebase获取了帖子，这些数据通过页面上的循环显示，如下所示：

localhost:8000

因此，每个帖子<div class="col s12 m6 l6" id="KQlQlg_Vg6eVWDI19NM"> <div> <span class="modify-post"><span class="edit btn green waves-effect waves-light" title="edit"><i class="fa fa-pencil-square-o"></i></span> <span id="KQlQlg_Vg6eVWDI19NM" class="delete btn red waves-effect waves-light" title="delete"><i class="fa fa-trash-o"></i></span> </span><span class="post_tag"> Birthday </span> <h3 class="post_title">lorem ipsum dolor sit amet</h3> <div class="post_short"> <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem </p> </div><button class="blue btn waves-effect waves-light"><i class="fa fa-align-left"></i>   View post </button> <p class="post-details white-text"></p> </div> </div>的ID都等于Firebase中帖子的ID。现在我遇到的问题是通过我创建的删除按钮删除帖子。它不会返回任何内容，也不会从数据库中删除任何帖子。

我试图实现这一点：

<div>

感谢任何帮助。

PS（来自评论部分）：
当我将JavaScript代码粘贴到控制台时，JavaScript代码可以正常工作，但当它在HTML或其JavaScript文件中时无法正常工作

Answer 1

您必须在HTML加载后呈现您的点击事件

<div class="col s12 m6 l6" id="KQlQlg_Vg6eVWDI19NM">
  <div>
    <span class="modify-post"><span class="edit btn green waves-effect waves-light" title="edit"><i class="fa fa-pencil-square-o"></i></span>
    <span id="KQlQlg_Vg6eVWDI19NM" class="delete btn red waves-effect waves-light" title="delete"><i class="fa fa-trash-o"></i></span>
    </span><span class="post_tag"> Birthday </span>
    <h3 class="post_title">lorem ipsum dolor sit amet</h3>
    <div class="post_short">
      <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum
        dolor sit amet lorem ipsum dolor sit ametlorem </p>
    </div><button class="blue btn waves-effect waves-light"><i class="fa fa-align-left"></i> &nbsp; View post </button>
    <p class="post-details white-text"></p>
  </div>
</div>
<script>
ClickEvent();
<script>
function ClickEvent(){
$('span.modify-post>span.delete').click(function(e) {
  var clickedPostId = e.target.offsetParent.id;
  alert("you just clicked the post with id " + clickedPostId);
  deletePost(clickedPostId);
});
}

Answer 2

我无法在点击事件上删除firebase帖子的原因是因为我的代码在文档完成加载后立即运行，而不是在firebase完成从database获取帖子时。所以为了纠正这个问题，我可以使用$(window).load()事件处理程序（在jQuery的情况下）或window.onload()（对于纯javascript），以确保firebase将我的数据加载到DOM（使用我的函数）在执行任何基于CRUD的操作之前。

这是我的解决方案：

$(window).load(function () {
  $('span.modify-post>span.delete').click(function (e) {
    var clickedPostId = e.target.offsetParent.id;
    alert("you just clicked the post with id " + clickedPostId);
    // deletePost(clickedPostId);
    var sure = confirm("are you sure to delete this post?");
    if (sure) {
      firebase.database().ref('blog/').child('posts/' + clickedPostId).remove().then(function () {
        alert("post deleted!");
      });
    }
  });
});

如何通过点击事件使用按钮删除从Firebase获取的帖子？

2 个答案: