我正在尝试生成动态表单并在有人点击评论部分的回复时显示它。
所以,
首先使用 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 中。
我们将不胜感激。
谢谢
最佳答案
在点击函数中创建表单就成功了。
$('.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();
});
关于Javascript、Jquery 和 jade : Dynamic forms not showing up in all the instances of relevant elements,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32060433/