Question

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?

Answer 1

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);