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

I successfully fetched posts from Firebase and those data were displayed via looping on the page like this:

我成功从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>

So each post's <div> have an id equal to the id of its post in Firebase. Now the problem I have is in a verge to delete a post via the delete button I created. It doesn't return anything nor delete any post for me from the database.

因此,每个帖子的

的ID都等于Firebase中帖子的ID。现在我遇到的问题是通过我创建的删除按钮删除帖子。它不会返回任何内容,也不会从数据库中删除任何帖子。

Here is my attempt to implement that:

这是我尝试实现的:

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

Appreciate any help.

感谢任何帮助。

PS (from comments section):
The JavaScript code works when I paste it to the console, but it won't work when it's in the HTML or its JavaScript file

PS(来自评论部分):JavaScript代码在我将其粘贴到控制台时起作用,但当它在HTML或其JavaScript文件中时不起作用

2 个解决方案

#1

You have to render your click event after the HTML load

您必须在HTML加载后呈现Click事件

<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

The reason why I couldn't delete my firebase post on click event is because my code runs immediately after document finish loading and not when firebase is done fetching post from database. So to correct this, I can either use $(window).load() event handler(in case of jQuery) or window.onload() (for pure javascript) in order to ensure firebase loads my data to the DOM (using my functions) before it carry out any CRUD based operation.

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

Here is my solution:

这是我的解决方案:

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

#1