Question

Say I want to modify a text by clicking on it, which turns to a input text field along with two buttons, save and cancel like below (the click event has been omitted and I am using the replaceWIth() from jQuery).

Before transformation:

<span>text<input type="button" value="delete"</span>

After transformation:

<input type="text"><input type="button" value="save"><input type="button" value="cancel">

what I want to do is if the I click on the cancel button, nothing happens and the "after transformation" part can be restore to the original part like how it looked before

<span>text<input type="button" value="delete"</span>

any way to do that? I thought I should somehow "save" before transforming like "snap" a picture or something. Any idea?

Answer 1

Waited till the India vs WI match was done before posting 🙂

This is what you want : http://jsfiddle.net/G8Kaj/4/

It uses live so that it’ll work multiple times. It also works if there are multiple rows of because it simple picks up the parent and doesn’t rely on there being only 1 row.

<span class='text'>text<input type="button" class='deleteButton' value="delete"></span>

$('span.text').live('click', function(){
    var $this = $(this);
    $this.data('oldText', $this.html());
    var newText = '<input  class="theText" type="text"><input class="saveButton"  type="button" value="save"><input class="cancelButton"  type ="button" value="cancel">';
    $this.html(newText);
});

$('.cancelButton').live('click', function(e){
    var $this = $(this); 
    var parent = $this.parent('span');
    parent.html(parent.data('oldText'));
    e.stopPropogation();
});

$('.saveButton').live('click', function(){
    //do something on save
    e.stopPropogation();
});


$('.theText, .deleteButton, cancelButton').live('click', function(){
    e.stopPropogation();
});

Uses the jqery data object to store the old state on a per span basis.