Question

我正在使用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">')
});

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

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

Answer 1

试试这个：

$(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);

Answer 2

它对我有用，也许你不想要隐藏的表格字段？

http://jsfiddle.net/M5vWR/

使用可见的表单元素查看此内容。

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

Answer 3

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

使用jquery将表单插入页面？

3 个答案: