Question

因此，我正在使用JavaScript动态生成HTML代码，该代码会从Firebase实时数据库中加载所有图像。我目前正在实现附加到每个图像的按钮，单击该按钮将删除该图像。但是，在使用标准JavaScript和Jquery多次尝试获取此div的ID属性后，警报框中的ID始终为“未定义”。检查网页可以让我看到图像的ID总是很好地加载，所以我知道它在那里。

This is the HTML Generated that I'm trying to interact with.

JavaScript函数响应我的html'onclick事件'

function deleteFile(){

var postId = $(this).closest('div').attr('id');
alert("You have selected id: " + postId);
var sure = confirm("Are you sure you want to delete this post?");
 if(sure){
    firebase.database().ref().child('Posts/' + postId).remove().then(function(){
        alert("Post deleted sucessfully");
      });
    }
  };

附加的图片是在实际的Chrome检查器中生成的html。该ID当然都是唯一的。

Answer 1

由于$(this)具有不同的上下文，因此无法与$(this)配对onclick，您可以使用console.log($(this));

查看其值

应该做的是向该按钮添加一个类，并通过jquery绑定onclick事件。运行以下代码段。

红色div包含通过jquery附加的onclick事件。
黄色div包含附加到按钮属性onclick的onclick事件。

$(document).ready(function(){
   $(".getIdButton").click(function() {
      alert($(this).closest("div").attr("id"));
   });
});

function getId() {
  alert($(this).closest("div").attr("id"));
  console.log($(this));
}

div {
  width: 100px;
  height: 100px;
  padding: 20px;
  display: inline-block;
}

#red {
  background-color: red;
}

#yellow {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="red">
  <a href="#">Just a link</a>
  <button class="getIdButton">Click Me</button>
</div>

<div id="yellow">
  <a href="#">Just a link</a>
  <button onclick="getId()">Click Me</button>
</div>

Answer 2

在您的html onclick属性上添加this参数，使其变为deleteFile(this)

然后在您的js上

function deleteFile(element){
    var postId = $(element).closest('div').attr('id');
    alert("You have selected id: " + postId);
    var sure = confirm("Are you sure you want to delete this post?");
    if(sure){
        firebase.database().ref().child('Posts/' + postId).remove().then(function(){
            alert("Post deleted sucessfully");
        });
    }
};

jQuery在我尝试获取的div元素的ID上获取“未定义”

2 个答案: