jQuery追加打破我的HTML表單（提交按鈕）

我想通過jQuery使用append（）來提交按鈕創建一個窗體。所以如下：jQuery追加打破我的HTML表單（提交按鈕）

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

然後提交按鈕正常工作！

我很高興使用第二種方法，但寧可知道問題在這裏。

感謝

來源

2011-04-10 JimFing

[他是對的，你知道]（http://jsfiddle.net/5rZE5/） – Eric 2011-04-10 15:29:28

有了：所以一切被添加爲新的DOM元素，但不是在表單內

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

形式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' }) 
      ) 
     ) 
}));

來源

2011-04-10 15:28:19

哦，我明白了......我是jQuery的新手:) – JimFing 2011-04-10 15:33:28

追加的工作方式有些不同：

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

來源

2011-04-10 15:29:13

試試這個。由於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);

來源

2011-04-10 15:32:36 Eric

這個例子的工作完美：

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

來源

2013-06-25 07:17:21

jQuery追加打破我的HTML表單（提交按鈕）

回答

相關問題