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

【问题标题】：How do I delete post fetched from Firebase using a button by a click event?如何通过点击事件使用按钮删除从 Firebase 获取的帖子？
【发布时间】：2016-09-06 14:48:46
【问题描述】：

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

<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>

因此，每个帖子的 <div> 的 id 与其在 Firebase 中的帖子的 id 相同。现在我遇到的问题是通过我创建的删除按钮删除帖子。它不会返回任何内容，也不会从数据库中为我删除任何帖子。

这是我实现的尝试：

function deletePost(postId) {
  var sure = confirm("are you sure to delete this post?");
  if (sure) {
    firebase.database().ref('blog/').child('posts/' + postId).remove().then(function() {
      alert("post deleted!");
    });
  } else {
    alert("Something happened, couldn't delete post. Please try again");
  }
}

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

感谢任何帮助。

PS（来自 cmets 部分）：
JavaScript 代码在我将其粘贴到控制台时有效，但在 HTML 或其 JavaScript 文件中时无效

【问题讨论】：

javascript 代码在我粘贴到控制台时有效，但在 html 或其 Javascript 文件中时无效

标签： javascript jquery firebase firebase-realtime-database

【解决方案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);
});
}

【讨论】：

【解决方案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!");
      });
    }
  });
});

【讨论】：