jQuery append ломает мою HTML-форму (с помощью кнопки submit)

Question

jQuery append ломает мою HTML-форму (с помощью кнопки submit)

Я пытаюсь создать форму с кнопкой submit через jQuery, используя append (). Итак, следующее:

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>');

Однако, нажав на submit, ничего не происходит!

Однако если я сделаю следующее:

var s = 

'<form name="input" action="/createuser" method="get">' +

'Username: <input type="text" name="user" />' +

'<input type="submit" value="Submit" />' +

'</form>';



out.html(s);

Тогда кнопка Отправить работает нормально!

Я с удовольствием использую 2-й метод, но предпочел бы знать, в чем здесь проблема.

Спасибо

634 4

jQuery html forms

4 ответов:

Comments

Ничего не найдено.

Darin Dimitrov · Accepted Answer · 2011-04-10 18:44:07

С:
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' })
            )
        )
}));

Silver Light · Accepted Answer · 2011-04-10 18:29:13

Append работает немного иначе:

// 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);

Eric · Accepted Answer · 2017-05-23 14:55:27

Попробуйте вместо этого. Как сказалДарин Димитров , элементы автоматически закрываются при добавлении.

Метод сцепления делает вещи немного аккуратнее:
$('<form name="input" action="/createuser" method="get" />')
    .append('Username: <input type="text" name="user" />')
    .append('<input type="submit" value="Submit" />')
    .appendTo(out);

Anatoliy Nikolaev · Accepted Answer · 2013-07-01 13:19:29

Этот пример отлично работает:

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);
});