Vanilla Javascript：如何將多個事件偵聽器添加到使用 django 中的相同 class 動態創建的按鈕？

Question

我目前正在為 CS50w - Network 開發一個項目 4。 其中一項任務是添加一個編輯帖子按鈕（用於編輯登錄用戶（僅所有者）創建的帖子），該按鈕執行此異步操作。 由於存儲帖子我使用 Django 模型，我使用 Django （以及它的模板功能）也向用戶顯示所有帖子，以及一個編輯按鈕（如果用戶也是帖子的創建者）。 我在 div 中顯示所有帖子。 這意味着編輯的按鈕也是這個div的一部分......意味着我只能給它一個class或id來引用，但是我不知道如何區分它們，以及如何知道哪一個（從哪個帖子）被點擊，這樣我就可以編輯那個帖子，而不是第一個出現 DOM 中的 JS 的帖子......無論如何這里是代碼：

Django 中的 HTML：

{% 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>