Приложение jQuery ломает мою HTML-форму (с кнопкой отправки) - PullRequest
Новая
       17

Приложение jQuery ломает мою HTML-форму (с кнопкой отправки)

2 голосов
/ 10 апреля 2011

Я пытаюсь создать форму с помощью кнопки отправки через 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>');

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

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

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-й метод, но лучше знать, в чем здесь проблема.

Спасибо

Ответы [ 4 ]

4 голосов
/ 10 апреля 2011

С: 

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' })
            )
        )
}));
0 голосов
/ 25 июня 2013

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

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);
});
0 голосов
/ 10 апреля 2011

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

Метод цепочки делает вещи немного более аккуратными: 

$('<form name="input" action="/createuser" method="get" />')
    .append('Username: <input type="text" name="user" />')
    .append('<input type="submit" value="Submit" />')
    .appendTo(out);
0 голосов
/ 10 апреля 2011

Приложение работает немного по-другому: 

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