Trying to use .live with .toggle

I have tables that let you toggle between editable forms and the values. I also have a function that lets me dynamically add table clones. I need to be able to use the same toggle functionality on the newly created tables.

I tried using the .live function for the toggle but this causes me to have to make an extra click before the editable forms appear. How can I resolve this issue so I only need to click once?

$('.block a.submit').live('click', function(){
    $('.block a.submit').toggle(
        function(){
            $(this).text('Save').parent().each(function(){
                $(".value", this).hide();
                $(".edit", this).show();
                $(this).find('.edit :first').focus(); //focuses on first form element - less clicks
                $('thead').show();
            });
        },
        function(){
            $(this).text('Edit').parent().each(function(){
                开发者_JAVA技巧$(".edit", this).hide();
                $(".value", this).show();
                $('thead').hide();
            });
        }
    );
});

Here is a rough mock up of what I am trying to accomplish. The only main difference is the forms are initially hidden. http://jsfiddle.net/z5C2F/

---

try this:

$('.block a.submit').live('click', function(){
    $(this).toggle(//you need to use this
        function(){
            $(this).text('Save').parent().each(function(){
                $(".value", this).hide();
                $(".edit", this).show();
                $(this).find('.edit :first').focus(); //focuses on first form element - less clicks
                $('thead').show();
            });
        },
        function(){
            $(this).text('Edit').parent().each(function(){
                $(".edit", this).hide();
                $(".value", this).show();
                $('thead').hide();
            });
        }
    );
});