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.html('foo'); 핸들러 $('td.translation button')에서 작동하지 않습니다하지만 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을 호출 할 수 있습니다.

Answer 1

나는 $('td.translation').live('click'에 alert('call')을 넣어 내가 버튼을 클릭 할 때 실행되었다. 먼저 단추 핸들러 (html 및 경고 메시지 상자 변경)를 실행 한 다음 td에 대한 핸들러를 호출하고 textarea를 다시 작성합니다.

Answer 2

데모 여기를 참조하십시오 나는이 질문에 대한 답변이 되었기를 바랍니다 http://jsfiddle.net/QknuZ/2/

(td.html()와) 함께 경고를 시계 : replaceWith()가 실제 요소를 대체하면서 HTML html() 의지, 요소의 내용을 대체합니다.

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

replaceWith

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

는 DOM에서 요소를 제거하고 다시 HTML을 추가한다.

제발 내가 틀렸다면 정정 해주십시오, 이것이 도움이되기를 바랍니다. @Tats_innit에서 힌트를 사용

이미지