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 Object]而不是image标签。

我的目标是在最后一个单元格中创建一个包含图像的行，并使用一个有效的点击处理程序。

请帮助。

Answer 1

将字符串传递给 append() 时，首先将其“转换”为DOM元素/集合。因此，传递给 append() 的每个字符串都必须是有效的HTML / XHTML;你以后不能添加一些字符串。即使您事先关闭标记，图像仍可以附加到表格行。 E.g。

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

我不是100％肯定，但我认为HTML片段应该始终是“完整的”，这意味着只添加"</td></tr>"将无效。

解决方案是使用完整的HTML片段构建一个字符串，然后附加它，而不是一次附加一个片段。您可以在创建jQuery对象后始终添加单击处理程序，如下所示：

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

Answer 3

如何尝试使用jRow.html()？

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

它应该返回实际的HTML内容而不是jQuery-wrapped元素（jQuery对象），这可能是导致问题的原因，因为append（）期望得到一个要追加的String。

Attributes / html（）
操纵/追加（）

将jQuery元素附加到包含html的字符串

3 个答案: