Javascript text()-如何在不影响任何子元素的情况下更改标记的文本
我正在编写一个小的jQuery插件以允许内联编辑(出于我的目的,我想要一个非常小的轻量级自定义插件)。一切都很好,除了当我用新值更新原始标记时,它会删除用于进行编辑的编辑图像,因此不允许进一步编辑 我尝试使用替换编辑图像,但编辑图像不再具有与之关联的Javascript text()-如何在不影响任何子元素的情况下更改标记的文本,javascript,jquery,var,Javascript,Jquery,Var,我正在编写一个小的jQuery插件以允许内联编辑(出于我的目的,我想要一个非常小的轻量级自定义插件)。一切都很好,除了当我用新值更新原始标记时,它会删除用于进行编辑的编辑图像,因此不允许进一步编辑 我尝试使用替换编辑图像,但编辑图像不再具有与之关联的单击处理程序 html看起来有点像这样 <h2 class="inlineEdit">Thing to edit<a href='' class='pencil_edit_image'></a></h2>
单击
处理程序
html看起来有点像这样
<h2 class="inlineEdit">Thing to edit<a href='' class='pencil_edit_image'></a></h2>
如何才能最好地完成此操作?在更换前,您是否尝试过将其拆下
var existinglink = editThis.find(".pencil_edit_image");
existingLink.detach();
editThis.text($(this).val());
editThis.append(existinglink);
jQuery不支持文本节点,因此最简单的方法是将文本放入元素中,以便轻松访问它:
<h2 class="inlineEdit"><span class="editable">Thing to edit></span><a href='' class='pencil_edit_image'></a></h2>
$(".inlineEdit .editable").text($(this).val());
editThis
包含什么?它是h2
本身,相应地更新了代码。
<h2 class="inlineEdit"><span class="editable">Thing to edit></span><a href='' class='pencil_edit_image'></a></h2>
$(".inlineEdit .editable").text($(this).val());
$(".inlineEdit")[0].firstChild.innerHTML = $(this).val();