creating an inline update field using jquery

Question

Hello all. I've gotten stuck(again)

I have a table and one of the columns is a value that I want to be able to click, turn into an input field, then click again to change it back to just text.

I've gotten the first step done. It turns into an input field with a link to click and it uses the value that was previously in the td.

However, in writing the function to update the value and remove the input, I can't get it to fire at all. I've tried copying out the input field and hard coding that first step into the page and when I do that it does actually fire the click function. (I haven't finished writing this step as I wanted to get the function to fire first. Below is my code. Any help is overwhelmingly appreciated!

HTML:

<table>
<tr id="1"><td class="qty" set="0" >2</td></tr>
<tr id="2"><td class="qty" set="0" >2</td></tr>
<tr id="3"><td class="qty" set="0" >2</td></tr>
</table>

JQUERY:

$(".qty").click(function(){
    var value = $(this).text();
    var set =$(this).attr('set');
    if (set==0){
        $(this).html('<input type="text" name="quantity" value="'+value+'"><a href="#" class="update_qty">update</a> </span>');
        $(this).attr('set', '1');
    }
});

$(".update_qty").click(function(){
    alert("using this to check if it's firing");
});

Answer 1

$(".update_qty").click(function(){
    $("qty").html("<p>whatever text you want</p>");
});

Answer 2

you need to use the live() function, otherwise the event won't be added to newly created elements.

$(".update_qty").live('click',function() {
   alert("check if firing");
});

Answer 3

demo

http://jsfiddle.net/JEBaN/1/

some value

    <br><br>
    <a href='javascript:' id='toEdit'>To Edit Mode</a>
    <a href='javascript:' id='toView'>To View Mode</a>​


jQuery(function(){
        jQuery('#toEdit').click(_toEditMode);
        jQuery('#toView').click(_toViewMode);    
});

function _toEditMode()
{
    var _elm=jQuery('.converter');
    var _val= _elm.html();
    _elm.html('<input type="text" value="'+_val+'" />');
}

function _toViewMode()
{
    var _elm=jQuery('.converter');
    var _val= _elm.find('input').val();
    _elm.html(_val);
}

​