Не работает код внутри submit

Есть php-страница, в которой при загрузке генерируется определённое количество button.

<div class="news__pages pages">
        <h2>Страницы:</h2>
        <form class="pages__cont" method="post">
            <?
            for ($i = 0; $i < $pagesCount; $i++):?>
            <button type="submit" class="pages__btn" data-page="btn<?=$i + 1?>"><?=$i + 1?></button>
            <? endfor; ?>
        </form>
    </div>

Когда нажимаешь кнопку, то запускается JS

let pageButtons = document.querySelectorAll('.pages__btn');
pageButtons.forEach(function (item) {
    item.addEventListener('submit', function (e) {

    e.preventDefault();
    let body = {
        method: 'switchPage',
        page: this.dataset.page,
    };
    console.log(body);
});
});

Проблема в том, что всё, что внутри функции function (e), не выполняется. Не срабатывает e.preventDefault(), не срабатывает console.log, страница просто перезагружается. DOM строится правильно, листенеры тоже нормально добавляются.


Ответы (1 шт):

Автор решения: Marat

Надо вешать событие на click а не на submit, submit вешается на форму

→ Ссылка