html Функция jquery не работает, но replaceWith делает

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 функция не работает. Кто-нибудь знает, почему?

UPDATE: Когда я добавляю это window.td = td;, я могу позвонить html с консоли и он работает.

Answer 1

Используя подсказку с @Tats_innit я ставлю alert('call')$('td.translation').live('click' к и он был выполнен при нажатии на кнопку. Сначала он выполнит обработчик кнопки (он изменит html и окно предупреждения), а затем вызовет обработчик для td и снова создаст textarea.

Answer 2

Смотрите демо здесь и смотреть предупреждение http://jsfiddle.net/QknuZ/2/ (с td.html())

Я надеюсь, что это ответ на ваш вопрос: HTML html() будет заменяет содержимое элемента, в то время как ReplaceWith() заменяет фактический элемент.

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

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

The replaceWith удаляет элемент из DOM, а затем добавляет HTML обратно.

Пожалуйста, пожалуйста, поправьте меня, если я ошибаюсь, надеюсь, что это поможет.

Изображение