使用jquery将表单插入页面？

Question

使用jquery将表单插入页面？

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

Run Code Online (Sandbox Code Playgroud)

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

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

Answer 1

dav*_*ode 6

试试这个:

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

Run Code Online (Sandbox Code Playgroud)

无论如何,你绝对应该避免这种方法来向dom添加动态内容.最好的方法是创建一个包含所有必要标记的单个字符串,并一次性注入它!就像是:

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，5 月前
查看次数：	16818 次
最近记录：	14 年，5 月前