I today ask a question, about using Jquery, replace html elements with own values. link text

And I use answer, and get a problem. function replaceWithValues not works same in all cases.I call this function two times: 1. btnAddParam click
2. btnCancelEdit click

       $("#btnAddParam").click(function() {
            var lastRow = $('#mainTable tr:last');
            var rowState = $("#mainTable tr:last>td:first");
            replaceWithValues(lastRow, rowState);
            var htmlToAppend = "<tr bgcolor='#B0B0B0' ><td class='textField' er='editable'><input value='' type='text' /></td><td><textarea cols='40' rows='3' ></textarea></td><td>" + initSelectType(currentID) + "</td><td><input id='txt" + currentID + "3' type='text' class='measureUnit' /></td><td><input type='checkbox' /></td><td></td></tr>";
            $("#mainTable").append(htmlToAppend);

        });
        //buttonCancelEdit located in end of row
        $('#mainTable input:button').unbind().live('click', function() {

            var row = $(this).closest('tr');
            var rowState = $(this).closest('tr').find("td:first");
            replaceWithValues(row, rowState);
            $(this).remove();

        });

        //do row editable -- replaceWithElements
        $('#mainTable tr').unbind().live('click', function() {
            if ($(this).find("td:first").attr("er") == "readable") {
                var rowState = $(this).closest('tr').find("td:first");
                replaceWithElements($(this), rowState);

            }
        });

        function replaceWithValues(row, er) {

        if (er.attr("er") == "editable") {
            var inputElements = $('td > input:text', row);
            inputElements.each(function() {
                var value = $(this).val();
                $(this).replaceWith(value);
            });
            er.attr("er", "readable");
        }
        }

        function replaceWithElements(row, er) {
        if (er.attr("er") == "readable") {
            var tdinit = $("<td>").attr("er", "editable").addClass("textField");
            $('.textField', row).each(function() {
                var element = tdinit.append($("<input type='text' value="+$.trim($(this).text())+" />"));
                $(this).empty().replaceWith(element);
            });
            row.find("td:last").append("<input type='button'/>");
            //$('.selectField') ...
            //$('.textAreaField') ...

        }
    }

$("#btnAddParam").click() function works well. it call function replaceWithValues.

I call $('#mainTable tr').unbind().live('click', function() { } to do row editable, and it creates a button in the end of row.

After user can click this button and call function $('#mainTable input:button').unbind().live('click', function() {}. and this function call function replaceWithValues. but in this case it doesn't work.