CODEWITHSUNDEEP
javascriptjqueryvar
Chris
Chris

Reputation: 27384

jQuery.text() - How can I alter text of tag without affecting any sub-elements

I am writing a small jQuery plugin to allow inline editing (for my purposes I want a very small lightweight custom plugin). Everything works great except when I update the original tag with the new value it removes the edit image used to instigate editing, and as such no further edits are allowed.

I tried to the following, with replaces the edit image but the edit image no longer has the click handler associated with it.

The html looks a little like this

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

The javascript looks like:

var editThis = $(".inlineEdit");

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

How best can I accomplish this?

Upvotes: 2

Views: 90

Answers (2)

Guffa
Guffa

Reputation: 700212

jQuery doesn't have support for text nodes, so the easiest is to put the text in an element so that you can easily access it:

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

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

To access the text node without adding an extra element, you can use the DOM element:

 $(".inlineEdit")[0].firstChild.innerHTML = $(this).val();

Upvotes: 1

Supr
Supr

Reputation: 19022

Have you tried detaching it before it is replaced?

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

Upvotes: 4

Related Questions