使用jquery将表单插入页面？答案

【问题标题】：Insert a form into a page using jquery?使用jquery将表单插入页面？
【发布时间】：2011-11-10 15:43:43
【问题描述】：

我正在使用 jquery 将隐藏表单插入页面（一旦页面已经加载）。由于某种原因，代码不起作用。以下是代码示例：

$(function(){
    $('body')
        .append('<form id="mySearch"></form>'); //append a new form element with id mySearch to <body>
    $('#mySearch') 
        .attr("action","mySearchPage.cfm") .attr("method","post") //set the form attributes
        //add in all the needed input elements
        .append('<input type="hidden" name="btnSearch" id="btnSearch" value="Search">')
        .append('<input type="hidden" name="txtField1" id="txtField1" value="">')
        .append('<input type="hidden" name="txtField2" id="txtField2" value="">')
        .append('<input type="hidden" name="selType" id="selType" value="0">')
        .append('<input type="hidden" name="selType2" id="selType2" value="2">')
});

表单未插入到页面正文中。我做错了什么？

更新：我发现当我在自己的页面中使用代码时，它可以正常工作。当我尝试将它集成到一个已经存在的大型页面中时，它不再起作用。关于什么可能导致完全相同的代码失败的任何想法？

【问题讨论】：

标签： jquery forms append

【解决方案1】：

它对我有用，也许你不想隐藏表单域？

http://jsfiddle.net/M5vWR/

用可见的表单元素查看这个。

http://jsfiddle.net/M5vWR/2/

【讨论】：

我希望它们不可见。但他们根本不在那里。我试过检查页面源，但它不存在。
检查当前的 dom。 “查看源代码”只会显示原始标记。
当我检查 dom 时它也没有出现。这段代码在一个单独的 javascript 文件中会有什么不同吗？
只要设置正确就没有关系。
我看了小提琴，但我对小提琴不太熟悉...我看到它似乎对你有用，但我仍然不知道为什么它对我不起作用:-/

【解决方案2】：

试试这个：

$(document).ready(function(){
    $('body')
        .append('<form id="mySearch"></form>'); //append a new form element with id mySearch to <body>
    $('#mySearch') 
        .attr("action","mySearchPage.cfm") .attr("method","post") //set the form attributes
        //add in all the needed input elements
        .append('<input type="hidden" name="btnSearch" id="btnSearch" value="Search">')
        .append('<input type="hidden" name="txtField1" id="txtField1" value="">')
        .append('<input type="hidden" name="txtField2" id="txtField2" value="">')
        .append('<input type="hidden" name="selType" id="selType" value="0">')
        .append('<input type="hidden" name="selType2" id="selType2" value="2">')
});

无论如何，您绝对应该避免使用这种向 dom 添加动态内容的方法。最好的技术是创建一个包含所有必要标记的字符串并一次性注入！比如：

var HTML = '<form attributes><input><input>...</form>';
$("#container").html(HTML);

【讨论】：

另外，你能解释一下为什么注入单个字符串是最好的技术吗？
$(function(){ != $(document).ready(function(){ ... 而且单次注入更好，因为您不必多次遍历 dom 也调用几个方法。
jquery API 声明它们确实是相同的：api.jquery.com/ready
是的，理论上它们是相同的，但我不相信 100% 的 jQuery 文档（我之前遇到过一些问题，与文档不匹配：P）......所以我建议您尝试另一种语法；）

【解决方案3】：

毕竟，这只是包含 javascript 的文件中的一个额外标签的语法问题：P 现在代码可以工作了！

【讨论】：