Javascript、Jquery 和 jade : Dynamic forms not showing up in all the instances of relevant elements

Question

我正在尝试生成动态表单并在有人点击评论部分的回复时显示它。

所以，

首先使用 Jquery 生成如下所示的表单。

script(type='text/javascript').
        $(document).ready(function() {
            var cVariable = !{JSON.stringify(data1)};
            var userEmail = !{JSON.stringify(data.userEmail1)};
            var serviceID = !{JSON.stringify(data._id)};

            if(cVariable == 1){
                var $myform = $('<form/>', {
                action: '/services/shoutOutReplyAdd', 
                method: 'post',
                name: 'reply-form' 

                });

                $myform.append($("<input/>", {
                type: 'text',
                name: 'reply',
                id: 'formAddReply', 
                placeholder: 'reply'
                }));

                $myform.append($("<input/>", {
                type: 'hidden',
                id: 'userEmail1',
                name: 'userEmail1',
                value: userEmail
                }));

                $myform.append($("<input/>", {
                type: 'hidden',
                id: 'serviceID',
                name: 'serviceID',
                value: serviceID
                }));

                $myform.append($("<input/>", {
                type: 'submit',
                id: 'btn',
                value: 'Post reply'
                }));

                $("#reply-comment-form").append($myform);

            }


        });

$(function(){
            $('.reply-comment').on('click', function(e){
                e.preventDefault();
                $(this).next('#reply-comment-form').show();
            });
        }); 

第二步是为主体指定 HTML/Jade。我从服务器获取消息值，并希望在用户单击回复文本时显示回复表单。循环执行三次。

each i in data.reply
            p #{i.msg}
            a(id='' class = 'reply-comment' href='') Reply
            #reply-comment-form         
        hr      
        br

另外指出，在 CSS 中，我有如下设置

  #reply-comment-form{ display:none; } 

我还有JQ功能，当点击 anchor 元素文本时，它会显示表单。这是它的代码。

$(function(){
            $('.reply-comment').on('click', function(e){
                e.preventDefault();
                $(this).next('#reply-comment-form').show();
            });
        }); 

当我检查生成的 HTML 时，我只看到表单仅分配给“reply-comment-form”div 元素的第一个实例。

数据库中有三个评论，所以我应该看到三个表单实例。但是，我只看到一个实例。

只是另一条信息，生成表单的代码和单击 anchor 元素的代码都在一个通用的 script(type='text/javascript'). block 中。

我们将不胜感激。

谢谢

Answer 1

在点击函数中创建表单就成功了。

$('.reply-comment').on('click', function(e){

                var $myform = $('<form/>', {
                action: '/services/shoutOutReplyAdd', 
                method: 'POST',
                name: 'reply-form' 

                });

                $myform.append($("<input/>", {
                type: 'text',
                name: 'reply',
                id: 'formAddReply', 
                placeholder: 'reply'
                }));

                $myform.append($("<input/>", {
                type: 'hidden',
                id: 'userEmail1',
                name: 'userEmail1',
                value: userEmail
                }));

                $myform.append($("<input/>", {
                type: 'hidden',
                id: 'serviceID',
                name: 'serviceID',
                value: serviceID
                }));

                $myform.append($("<input/>", {
                type: 'submit',
                id: 'btn',
                value: 'Post reply'
                }));

                $(this).append($myform);
                e.preventDefault();
                $(this).next('#reply-comment-form').show();
            });