По нажатию на кнопку "Save" должен улетать POST запрос на '/complete' и страница должна перерисовываться в соответствии с выбранными чекбоксами. Проблема заключается в том, что после первого нажатия на кнопку 'Save' всё отлично перерисовывается и POST запрос успешно улетает на сервер, но вот на второе нажатие кнопки 'Save' страница никак не реагирует, словно события на эту кнопку и вовсе нету.
Вот код скрипта app.js:
const arrayId = {}
document.querySelector('.h2h').addEventListener('click', (e) => {
console.log(e.target)
})
document.querySelectorAll('.todoCheckbox').forEach(element => {
element.addEventListener('click', e => {
let currentId = e.target.dataset.id
if (currentId) {
arrayId[currentId] = e.target.checked
}
})
})
document.querySelector('.btn.btn-small.save').addEventListener('click', async (e) => {
e.preventDefault()
fetch('/complete', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: JSON.stringify(arrayId)
}).then(res => res.json())
.then(tasks => {
document.querySelector('.show-wrapper').innerHTML = tasks.map(element => {
if (element.completed) {
return `
<li class="todo">
<label>
<input class="todoCheckbox" type="checkbox" name="completed" checked data-id="${element._id}">
<span class="completed">${element.title}</span>
</label>
</li>
`
} else {
return `
<li class="todo">
<label>
<input class="todoCheckbox" type="checkbox" name="completed" data-id="${element._id}"">
<span>${element.title}</span>
</label>
</li>
`
}
}).concat(`<button class="btn btn-small save" type="submit">Save</button>`).join('')
})
})
Вот страница, на которую выводятся чекбоксы и кнопка 'Save':
<h2 class="h2h">Todos page</h2>
{{#if tasks.length}}
<ul class="show-wrapper">
{{#each tasks}}
<li class="todo">
<label>
{{#if completed}}
<input class="todoCheckbox" type="checkbox" name="completed" checked data-id="{{_id}}">
<span class="completed">{{title}}</span>
{{else}}
<input class="todoCheckbox" type="checkbox" name="completed" data-id="{{_id}}">
<span>{{title}}</span>
{{/if}}
</label>
</li>
{{/each}}
<button class="btn btn-small save" type="submit">Save</button>
</ul>
{{else}}
<p>No todos!</p>
{{/if}}
