0

我有非常奇怪的行为。我有这个代码（我删除了不相关的代码）。

$(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 并且它可以工作。

4

2 回答 2

1

在此处查看演示并通过http://jsfiddle.net/QknuZ/2/观看警报（带有td.html()）

我希望这能回答您的问题：HTMLhtml()将替换元素的内容，而 replaceWith() 替换实际元素。

http://api.jquery.com/html/

http://api.jquery.com/replaceWith/

从 DOM中replaceWith删除元素，然后再次添加 html。

如果我错了，请纠正我，希望这会有所帮助。

图片

在此处输入图像描述

于 2012-06-27T11:00:07.320 回答
0

使用来自@Tats_innit 的提示，当我单击按钮时它被执行alert('call')。$('td.translation').live('click'首先它执行按钮处理程序（它更改 html 和警报消息框），然后为 td 调用处理程序并再次创建 textarea。

于 2012-06-27T11:13:11.687 回答