如何隐藏,当页面启动时,使用jQuery自动生成html元素

Question

页面启动时,jQuery会生成一个我想要隐藏的表单.因为我想在点击按钮时显示它.

通过这些说明,我创建了表单:

$("#cards").append('<li id="card" class="feed-element animated fadeInRight" style="color: grey" data-user="' + key + '">\n\
                        <button id="previewCard" type="button" value = "' + key + '" class="btn btn-primary btn-sm btn-block btn-xs">' + preview + '</li>\n\
                        <form id="cardFormDetail" class="animated fadeInRight">\n\
                            <div class="form-group">\n\
                                <input id="customerCardDate" class="form-control" type="text">\n\
                            </div>\n\
                            <div class="form-group">\n\
                                <input id="customerCardScope" class="form-control" type="text">\n\
                            </div>\n\
                            <div class="form-group">\n\
                                <textarea id="customerCardText" class="form-control" rows="5"></textarea>\n\
                            </div>\n\
                        </form>\n\
                        <button id="modifiedCard" type="button" value = "' + key + '" class="btn btn-primary btn-xs pull-left">Modified</button>\n\
                        <button id="deleteRequestCard" type="button" value = "' + key + '" class="btn btn-primary btn-xs pull-right">Delete</button>\n\
                        <br><hr style="border-color: #c80b00;">');

页面启动时,cardFormDetail表单可见.我怎么能让它不可见？

我试过$("#cardFormDetail").hide()但它不起作用.原因是因为它是一个动态元素,对吗？

Answer 1

由于你想在加载时隐藏它,请使用CSS而不是jQuery,除非有理由证明你为什么要这样做.

#cardFormDetail { display: none; }