Vanilla Javascript：如何将多个事件侦听器添加到在 Django 中使用相同 class 动态创建的按钮？

Question

我目前正在为 CS50w - 网络开展项目 4。其中一项任务是添加一个编辑 posts 按钮（用于编辑登录用户（仅所有者）创建的 posts），它执行此异步操作。由于存储 posts 我使用的是 Django 模型，我使用 Django（及其模板功能）也向用户显示所有 posts，以及一个编辑按钮（如果用户是post 的创建者）。我在 div 中显示所有 post。这意味着编辑按钮也是这个div的一部分......意味着我只能给它一个class或id来引用，但我不知道如何区分它们，以及如何知道单击了哪个（从哪个 post），以便我可以编辑 post 而不是 DOM 中的 JS 出现的第一个......无论如何，这是代码：

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，它不起作用（我才刚刚开始学习它，并且想用 vanilla 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';
    }

Answer 1

授权就是答案

请注意，您在 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>

Vanilla Javascript：如何将多个事件侦听器添加到在 Django 中使用相同 class 动态创建的按钮？

Vanilla Javascript: How to add multiple event listeners to buttons which are dynamically created with same class in django?

javascript

django

addeventlistener

dom-events