Question

我真的很奇怪。我有这个代码（我删除不相关的代码）。

$(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>');
       });
});

$('td.translation button')处理程序td.html('foo');中的

不起作用，但td.replaceWith('<td class="translation translated-string">foo</td>');起作用。没有错误，它什么都不做。

我尝试使用以下方法重新创建此行为：

$(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;
    });
});

但在代码工作之上。

我可以使用replaceWith，但我知道为什么html函数不起作用。有谁知道为什么？

更新：当我添加此window.td = td;时，我可以从控制台调用html并运行。