2

我正在编写一个小的 jQuery 插件来允许内联编辑（出于我的目的，我想要一个非常小的轻量级自定义插件）。一切都很好，除了当我用新值更新原始标签时，它会删除用于发起编辑的编辑图像，因此不允许进一步的编辑。

我尝试了以下操作，替换了编辑图像，但编辑图像不再具有click与之关联的处理程序。

html看起来有点像这样

<h2 class="inlineEdit">Thing to edit<a href='' class='pencil_edit_image'></a></h2>

javascript看起来像：

var editThis = $(".inlineEdit");

var existinglink = editThis.find(".pencil_edit_image");
editThis.text($(this).val());
editThis.append(existinglink);

我怎样才能最好地做到这一点？

4

2 回答 2

4

您是否尝试在更换之前将其拆下？

var existinglink = editThis.find(".pencil_edit_image");
existingLink.detach();
editThis.text($(this).val());
editThis.append(existinglink);
于 2012-06-15T10:07:44.593 回答
1

jQuery 不支持文本节点，所以最简单的方法是将文本放在一个元素中，以便您可以轻松访问它：

<h2 class="inlineEdit"><span class="editable">Thing to edit></span><a href='' class='pencil_edit_image'></a></h2>

 $(".inlineEdit .editable").text($(this).val());

要在不添加额外元素的情况下访问文本节点，可以使用 DOM 元素：

 $(".inlineEdit")[0].firstChild.innerHTML = $(this).val();
于 2012-06-15T10:10:41.610 回答