Question

I have realy strange behavior. I have this code (I remove unrelated code).

$(function() {
        function get_translations() {
            $('#translations tr').not(':eq(0)').remove();
            var item = {
                context: "1: context",
                term: "2: term",
                translation: "3: translation"
            };  

            var tr = $('<tr/>').
                append('<td class="context">' + (item.context || '&nbsp;') + '</td>').
                append('<td class="original-string">' + item.term + '</td>').
                append('<td class="translation translated-string">' + item.translation +
                       '</td>').
                append('<td class="delete-col"><button class="'+
                       'delete translation-delete">X</button></td>').
                data('term', item.term || '').
                data('translation', item.translation || '').
                data('context', item.context || '').
                appendTo('#translations');
        }
        get_translations();

       $('td.translation').live('click', function() {
           var $this = $(this);
           if ($this.find('textarea').length == 0) {
               var text = $this.empty().parent().data('translation');
               //$this.data('content', text).empty();
               $this.html('<tex' + 'tarea>' + text + '</text' +
                 'area><button>Save</button><a href="#" class="_cancel">Cancel</a>');
               //appendTo($this);
           }
       });
       $('td.translation button').live('click', function() {
           var td = $(this).parent();
           var tr = td.parent();
           console.log(td);
           td.html('foo');
           //td.replaceWith('<td class="translation translated-string">foo</td>');
       });
});

in $('td.translation button') handler td.html('foo'); don’t work but td.replaceWith('<td class="translation translated-string">foo</td>'); does. No errors, it simply do nothing.

I try to recreate this behavior using this:

$(function() {
    $('table').append('<tr><td>:empty</td></tr>');
    $('td').live('click', function() {
        var tr = $(this).parent();
        $(this).html('<textarea></textarea><a class="foo" href="#">a:</a>');
    });
    $('.foo').live('click', function() {
        var td = $(this).parent();
        var tr = td.parent();
        td.html(':empty');
        return false;
    });
});

but above code work.

I can use replaceWith, but I what to know why html function doesn’t work. Anybody know why?

UPDATE: When I add this window.td = td; I can call html from console and it work.

Answer 1

Using hint from @Tats_innit I put alert('call') to $('td.translation').live('click' and it was executed when I click the button. First it execute button handler (it change html and alert message box) and then invoke handler for td and create textarea again.