Question

在车把{{#each}}循环中，我动态生成了包含产品信息的元素。每个表格中都包含一个允许用户对产品发表评论的表格。我希望通过AJAX提交表单，以防止每次用户提交评论时重新加载整个页面。我的直接问题是e.preventDefault（）不能阻止表单提交的触发。

这是html / handlebars文件。请注意，每个评论表单都有一个唯一的ID – commentForm {{id}}。这会将产品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]);
            });
        })
    });
});

这是我用来启动AJAX调用的javascript / jquery。 #postUL ID是{{#each}}循环外最直接的父元素。用户单击锚标记（“ Post Comment”），我们获得该表单的唯一表单ID，然后触发隐藏的提交。我最初是让用户直接单击输入的（没有定位标记），但是我认为最好有一个提交事件。然后，我想使用.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');
    }));
}));

但是我得到了相同的结果。该表格仍然提交。我想念什么？

谢谢。

在快速车把{{#each}}循环

0 个答案: