Почему при сабмите формы оправляется GET запрос?

Question

[imnotsmart]

Вот нативная форма комментариев:

<form class="comment-form" id="comment-form-{{ node.id }}" data-id="{{ post.id }}" method="post">
                            <textarea class="form-control form-comment-{{ post.id }}" rows="2" cols="40" placeholder="Комментарий" id="comment-text{{ post.id }}" name="comment_content"></textarea>
                            <input type="hidden" name="post_id" value="{{ post.id }}">
                            <button class="btn btn-dark btn-sm mt-1" type="submit">Оставить комментарий</button>
                        </form>

При отправке Ajax запроса генерирует вот такой html:

$(`
                <ul class="children mb-2" style="list-style: none;">
                    <li id="${response['node']}">
                        {{ request.user }} <small class="text-muted">${currentdate}</small><br>
                        ${_comment}<br>
                        <a class="text-decoration-none" data-bs-toggle="collapse" href="#collapseExample${response['node']}" role="button" aria-expanded="false" aria-controls="collapseExample">Ответить</a> <br>
                        <div class="collapse" id="collapseExample${response['node']}">
                            <form class="comment-form" id="comment-form-${response['node']}" data-id="${response['post']}" data-parentid="${response['node']}" data-nodeid="${response['node']}">
                                <textarea class="form-control form-comment-${response['post']}" rows="2" cols="40" placeholder="Комментарий" id="comment-text${response['post']}" name="comment_content"></textarea>
                                <button class="btn btn-dark btn-sm mt-1" type="submit">Ответить</button>
                            </form>
                        </div>
                    </li>
                </ul>
            `).insertAfter(`#${_nodeid}`);

Суть проблемы заключается в том, что при сабмите сгенерированной формы у меня отправляется GET запрос, а не пост.
method post и action устанавливал - не помогает.

Вот полный Ajax запрос:

$('.comment-form').submit(function(e) {
    e.preventDefault();

    var _postid = $(this).attr('data-id');
    var _comment = $(this).find('.form-control').val();
    var _nodeid = $(this).attr('data-nodeid');
    var _parentid = $(this).attr('data-parentid')

    $.ajax({
        type: "POST",
        url: "{% url 'comment_post' %}",
        data: {'post_id': _postid, 'content': _comment, 'parent_id': _parentid, 'csrfmiddlewaretoken': '{{ csrf_token }}'},
        success: function(response) {

            const options = {
                year: 'numeric',
                month: 'short',
                day: 'numeric',
                hour12: true,
                hour: 'numeric',
                minute: '2-digit'
            };
            let currentdate = new Date().toLocaleString('en-US', options)
            var _html =`
            <li id="${response['node']}">
                {{ request.user }} <small class="text-muted">${currentdate}</small><br>
                ${_comment}<br>
                <a class="text-decoration-none" data-bs-toggle="collapse" href="#collapseExample${response['node']}" role="button" aria-expanded="false" aria-controls="collapseExample">Ответить</a> <br>
                <div class="collapse" id="collapseExample${response['node']}">
                    <form class="comment-form" id="comment-form-${response['node']}" data-id="${response['post']}" data-parentid="${response['node']}" data-nodeid="${response['node']}">
                        <textarea class="form-control form-comment-${response['post']}" rows="2" cols="40" placeholder="Комментарий" id="comment-text${response['post']}" name="comment_content"></textarea>
                        <button class="btn btn-dark btn-sm mt-1" type="submit">Ответить</button>
                    </form>
                </div>
            </li>
                `

            if (_nodeid) {
                $(`
                <ul class="children mb-2" style="list-style: none;">
                    <li id="${response['node']}">
                        {{ request.user }} <small class="text-muted">${currentdate}</small><br>
                        ${_comment}<br>
                        <a class="text-decoration-none" data-bs-toggle="collapse" href="#collapseExample${response['node']}" role="button" aria-expanded="false" aria-controls="collapseExample">Ответить</a> <br>
                        <div class="collapse" id="collapseExample${response['node']}">
                            <form class="comment-form" id="comment-form-${response['node']}" data-id="${response['post']}" data-parentid="${response['node']}" data-nodeid="${response['node']}">
                                <textarea class="form-control form-comment-${response['post']}" rows="2" cols="40" placeholder="Комментарий" id="comment-text${response['post']}" name="comment_content"></textarea>
                                <button class="btn btn-dark btn-sm mt-1" type="submit">Ответить</button>
                            </form>
                        </div>
                    </li>
                </ul>
            `).insertAfter(`#${_nodeid}`);
            } else {
                $(".comment-node-post"+_postid).prepend(_html);
            }
            $('.form-comment-'+_postid).val('');
        }
    });
})

Comments

[Danny Arty]

Потому что форма создана динамически, соответственно и обработчик должен быть другой.
Вместо
$('.comment-form').submit(function(e)...
сделай

$(document).on('submit','.comment-form',function(e)...

Answer 1

[v3shin]

Форму генерите, а обработчик на нее не навешиваете. Лучше повесьте обработчик на document:

$(document).on('submit', '.comment-form', function (e) {
    // код обработчика
});