JQuery получить неопределенный идентификатор элемента div, который я пытаюсь захватить

Question

Итак, я динамически генерирую HTML-код с JavaScript, который загружает все мои изображения из моей базы данных Firebase Realtime. В настоящее время я работаю над внедрением кнопки, прикрепленной к каждому изображению, которая будет удалять это изображение при нажатии. Тем не менее, после нескольких попыток получить этот идентификатор атрибута div с использованием как стандартного JavaScript, так и Jquery, идентификатор в окне предупреждения всегда «неопределен». Просмотр веб-страницы позволяет мне увидеть, что идентификатор изображения всегда загружается очень хорошо, поэтому я знаю, что он там есть.

Это созданный HTML-код, с которым я пытаюсь взаимодействовать.

Функция 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");
      });
    }
  };

Прикрепленное изображение - это то, что html генерирует в реальном инспекторе Chrome. Все идентификаторы, конечно, будут уникальными.

Answer 1

добавьте this параметр в ваш атрибут html onclick, чтобы он стал 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");
        });
    }
};

Answer 2

Сопряжение по щелчку с $(this) не будет работать, как вы ожидаете, потому что $(this) имеет другой контекст, вы можете просмотреть его значение, используя console.log($(this));

Что нужно сделать, это добавитьКласс для этой кнопки и связать событие onclick с помощью jquery. Запустить фрагмент ниже.

• Красный div содержит событие onclick, прикрепленное через jquery.
• Желтый 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>