e.preventDefault () не работает при отправке формы с ajax в цикле express-handlebars {{#each}} - PullRequest
Новая
       6

e.preventDefault () не работает при отправке формы с ajax в цикле express-handlebars {{#each}}

0 голосов
/ 18 сентября 2018

В цикле handlebars {{#each}} я динамически создавал элементы, содержащие информацию о продукте.В каждом из них есть форма, которая позволяет пользователю комментировать продукт.Я хотел бы, чтобы форма отправлялась через AJAX, чтобы предотвратить перезагрузку всей страницы каждый раз, когда пользователь отправляет комментарий.Моя непосредственная проблема заключается в том, что e.preventDefault () не предотвращает запуск отправки формы.

Вот файл html / handlebars.Обратите внимание, что каждая форма комментария имеет уникальный идентификатор - commentForm {{id}}.Это прикрепляет идентификатор продукта к «commentForm».Также обратите внимание, что я скрыл отправку ввода (с классом .d-none), и у меня есть видимый тег привязки.Причина объясняется ниже. 

<ul class='postUL' id="easyPaginate">    
    {{#if prod}}
        {{#each prod}}   
        <li>

        //product information here

        <form class='commentForm' id='commentForm{{id}}' method="post" 
        action="/content/addcomment/{{id}}">
            <div class="form-group">
                <label for="commentBody">Your comment:</label>
                <textarea class="form-control" name="commentBody" 
                id="commentBody" cols="30" rows="3"></textarea> 
            </div>
            <div class="d-flex justify-content-between align-items-center">
                <button data-target='#postcomments{{id}}' data- 
                toggle='collapse' class="btn btn-danger">Cancel</button>
                <a id='forshowbtn' class="btn btn-success text-white">Post 
                Comment</a>
                <input type="submit" id='commentSubmit' class="btn btn- 
                success d-none">
            </div>
        </form>

Вот маршрут express.js.На данный момент я просто делаю console.log на новый комментарий.Ранее я выполнял рендеринг страницы, и это вызывало бы перезагрузку. 

//add comment//
router.post('/addcomment/:id', (req, res) => {
    Product.findOne({_id: req.params.id})
    .then(prod => {
        Account.findOne({_id:req.user.id})
        .then(account => {
            const newComment = {
                commentBody: req.body.commentBody,
                commenter: account.username,
                comavatar: account.avatar
            }
            prod.comments.unshift(newComment);
            prod.commentCount++;
            prod.save().then(prod => {
                console.log(prod.comments[0]);
            });
        })
    });
});

А вот javascript / jquery, который я использую для инициирования вызова AJAX.Идентификатор #postUL является самым непосредственным родительским элементом вне цикла {{#each}}.Пользователь щелкает тег привязки («Комментарий к заметке»), мы получаем уникальный идентификатор формы для этой формы, а затем я запускаю скрытую отправку.Первоначально я велел пользователю щелкнуть по входу напрямую (без привязки), но подумал, что может быть лучше иметь одно событие отправки.Затем я хотел бы использовать .preventDefault (), чтобы я мог инициировать вызов AJAX.Моя проблема заключается в том, что форма немедленно отправляет.e.preventDefault () ничего не делает, стекирование e.preventDefault () с помощью e.stopImmediatePropagation () или e.stopPropagation () также ничего не делает.Форма всегда отправляется. 

$('.postUL').on('click', '#forshowbtn', (e => {
   const formID = e.target.parentElement.parentElement.id;
   $(`#${formID}`).trigger('submit', (e  => {
      e.preventDefault();
      console.log('default prevented');
   }));
}));

Я упоминал выше, что изначально я пытался заставить пользователя щелкнуть по входу напрямую.Вот javascript, который я использовал для этого: 

$('.postUL').on('submit', '#commentSubmit', (e => {
    e.preventDefault();
    const formID = e.target.parentElement.parentElement.id;
    $(`#${formID}`).trigger('submit', (e  => {
        e.preventDefault();
        console.log('default prevented');
    }));
}));

Но я получил тот же результат.Форма все еще отправляет.Чего мне не хватает?

Заранее спасибо.

...