追加一個jQuery元素到一個包含html的字符串

Question

我有一個jQuery包裹的元素，我想追加到一個html行。由於append（）貌似接受字符串，但不包含現有的jQuery元素（我可能會在這裏弄錯），所以我無法將其包裹起來。 我有以下設置：

var row='<tr><td>data1</td><td>data2</td><td>'; 
var img=$('<img src="path/to/img.png"'); 
img.click(myClickHandler); 

現在我想要做的就是這個img元素附加到我行和「關閉」的行以結束標記。 我做它，如下所示：

var jRow=$(row); 
jRow.append(img); 
jRow.append('</td></tr>'); 

後我排好了，我把它添加到我的表：

$('#tableId').append(jRow); 

嗯，上面是不行的，因爲我得到[對象對象]而不是我添加的行中的圖像標籤。

我的目標是在上一個單元格中有一行圖像，並有一個工作點擊處理程序。

Pleease，help。

Answer 1

當你傳遞一個字符串append()它是第一個「轉換」到DOM元素/集合。因此，您傳遞給append()的每個字符串都必須是有效的HTML/XHTML;稍後您不能添加字符串的位。即使您事先關閉標籤，圖像仍可以附加到表格行。例如。

var row='<tr><td>data1</td><td>data2</td><td></td></tr>'; 
var img=$('<img src="path/to/img.png"/>'); 
img.click(myClickHandler); 

var jRow = $(row); 
$('td:last', jRow).append(img); 

---

當你通過什麼append()或html()或prepend()（或其他類似方法）試圖約串忘記;你剛剛通過的不再是一個字符串;它已被解析爲HTML，並已作爲DOM元素（或多個DOM元素）添加到文檔中。

Answer 2

用jRow.html()來試試這個怎麼樣？

$('#tableId').append(jRow.html()); 

它應該返回你實際的HTML內容，而不是jQuery的包裹元素（jQuery對象），這可能是什麼原因造成的問題，因爲追加（）期望得到一個字符串追加。

• Attributes/html()
• Manipulation/append()

Answer 3

我不是100％肯定，但我認爲HTML片段應該永遠是 「完整的」，這意味着只需添加"</td></tr>"將無法​​正常工作。

一個解決方案是建立一個完整的HTML片段的字符串，然後追加它，而不是一次追加一個片斷。您可以隨時添加單擊處理您創建jQuery對象之後，就像這樣：

jRow.find("img").click(function() { ... });