Добавить элемент 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); 

Ну, все выше не работает, потому что я получаю [Объект Object ] вместо тега изображения в моей добавленной строке.

Моя цель состоит в том, чтобы иметь строку с изображением в последней ячейке и рабочий клик.

Pleease, помощь.

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), который, вероятно, что вызывает проблемы, так как Append() ожидает получить строку для добавления.

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

Answer 3

Я не уверен на 100%, но я думаю, что HTML фрагменты всегда должны быть "полной", а это означает, что добавление только "</td></tr>" не будет работать.

Решение состоит в том, чтобы построить строку с полным фрагментом HTML, а затем добавить ее вместо добавления частей по одному. Вы всегда можете добавить обработчик щелчка после того, как вы создали объект JQuery, как это:

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