Question

我正在尝试使用append（）通过jQuery创建一个带有提交按钮的表单。以下是：

out.append('<form name="input" action="/createuser" method="get">');
out.append('Username: <input type="text" name="user" />');
out.append('<input type="submit" value="Submit" />');
out.append('</form>');

但是，点击提交，没有任何反应！

但是，如果我执行以下操作：

var s = 
'<form name="input" action="/createuser" method="get">' +
'Username: <input type="text" name="user" />' +
'<input type="submit" value="Submit" />' +
'</form>';

out.html(s);

然后提交按钮正常工作！

我很高兴使用第二种方法，但宁愿知道这里有什么问题。

由于

Answer 1

使用：

out.append('<form name="input" action="/createuser" method="get">');

表单DOM元素由浏览器自动关闭，因此其他所有内容都将作为新的DOM元素添加，但不会添加到表单内部。

这是我喜欢使用DOM树的替代方法：

out.append($('<form/>', {
    name: 'input',
    action: '/createuser',
    method: 'get',
    html:
        $('<span/>', {
            html: 'Username: '
        })
        .after(
            $('<input/>', { type: 'text', name: 'user' })
            .after(
                $('<input/>', { type: 'submit', value: 'Submit' })
            )
        )
}));

Answer 2

附加功能有点不同：

// create your element first
var form = $('<form name="input" action="/createuser" method="get"></form>');
// add elements to it
form.append('<form name="input" action="/createuser" method="get">');
form.append('Username: <input type="text" name="user" />');
form.append('<input type="submit" value="Submit" />');
// and only then append it to your html
out.append(form);

Answer 3

试试这个。作为Darin Dimitrov said，元素在追加时会自动关闭。

方法链接让事情变得更加整洁：

$('<form name="input" action="/createuser" method="get" />')
    .append('Username: <input type="text" name="user" />')
    .append('<input type="submit" value="Submit" />')
    .appendTo(out);

Answer 4

这个例子很完美：

<强> HTML

<body></body>

使用JQuery编写脚本

$(document).ready(function(){
var form=" ";
    form+='<form>';
    form+='<form name="input" action="/createuser" method="get">';
    form+='Username:<input type="text" name="user" /><br/>';
    form+='<input type="submit" value="Submit" />';
    form+='</form>';
    $("body").append(form);
});

jQuery追加打破我的HTML表单（使用提交按钮）

4 个答案: