Ванильный 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>