Ванильный Javascript: Как добавить несколько слушателей событий к кнопкам, которые динамически создаются с одним и тем же классом в django?

В настоящее время я работаю над проектом 4 для CS50w - Сеть. Одна из задач - добавить кнопку редактирования постов (для редактирования постов, которые создал вошедший пользователь (только владелец)), которая делает это async. Поскольку для хранения постов я использую Django Models, я использую Django (и его возможности шаблонов) для отображения всех постов пользователям, а также кнопку редактирования (если пользователь является создателем поста). Я отображаю все посты в div. Это означает, что кнопка редактирования также является частью этого div... это означает, что я могу дать ей только один класс или id для ссылки, но тогда я не знаю, как различать их, и как узнать, какая из них (из какого поста) нажата, чтобы я мог редактировать этот пост, а не первый, на котором появляется JS в DOM... Короче вот код:

HTML в Django:

{% for post in posts %}
        <div class="post">
            <a href="{% url 'users' post.user.username %}">{{ post.user }}</a>
            <p>{{ post.content }}</p>
            <p>{{ post.created }}</p>
            {% if user.is_authenticated and user == post.user %}
                <button class="edit_post_button">Edit Post</button>
            {% endif %}
        </div>
        <div class="edit_post" style="display: none;">
            <a href="{% url 'users' post.user.username %}">{{ post.user }}</a>
            <textarea rows=3 cols=20>{{ post.content }}</textarea>
            <p>{{ post.created }}</p>
            <button class="save_edit_post_button">Save</button>
        </div>
{% endfor %}

и вот маленький JS, который я написал, который не работает (я только начинаю изучать его, и хотел бы закончить этот проект с ванильным JS):

 document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.edit_post_button').forEach(edit_post_button => {
            edit_post_button.addEventListener('click', edit_post);
        })
    });
    
    function edit_post(event) {
        document.querySelector('.post').style.display = 'none';
        document.querySelector('edit_post').style.display = 'block';
    }

Делегирование - это ответ

Обратите внимание, что вы забыли точку в document.querySelector('edit_post')

window.addEventListener('load', function() {
  document.getElementById('postContainer').addEventListener('click', function(e) {
    const tgt = e.target.closest('.edit_post_button')
    if (tgt) {
      const postDiv = tgt.closest('.postDiv')
      postDiv.querySelector('.post').hidden = true
      postDiv.querySelector('.edit_post').hidden = false
      console.log(tgt.dataset.id); // if needed
    }
  })
})
<div id="postContainer">
  <div class="postDiv">
    <div class="post">
      <a href="User1URL">user 1</a>
      <p>Post 1 </p>
      <p>yesterday</p>
      <button class="edit_post_button" data-id="postId1">Edit Post</button>
    </div>
    <div class="edit_post" hidden>
      <a href="User1URL">user 1</a>
      <textarea rows=3 cols=20>Post 1</textarea>
      <p>Yesterday</p>
      <button class="save_edit_post_button">Save</button>
    </div>
  </div>
  <div class="postDiv">
    <div class="post">
      <a href="User2URL">user 2</a>
      <p>Post 2 </p>
      <p>yesterday</p>
      <button class="edit_post_button" data-id="postId2">Edit Post</button>
    </div>
    <div class="edit_post" hidden>
      <a href="User2URL">user 2</a>
      <textarea rows=3 cols=20>Post 2</textarea>
      <p>Yesterday</p>
      <button class="save_edit_post_button">Save</button>
    </div>
  </div>
</div>

Вернуться на верх