HTML jQuery的功能不工作，但replaceWith确实

问题描述：

我真的很奇怪的行为。我有这个代码（我删除了无关的代码）。HTML jQuery的功能不工作，但replaceWith确实

$(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，它的工作。

比“不工作”更具体 - 什么都不发生，你会得到一个Javascript错误，你会得到意想不到的结果吗？ –

预期结果是什么？ '.html（'foo'）'不会创建一个带有foo类的DOM元素当然... – gdoron

@AonyonyGrist @gdoron它应该做'foo'但它不会，没有任何事情发生，当我做' td.replaceWith（'foo'）;'然后它将td更改为foo。在我的工作代码中，它是内联编辑。 – jcubic

答

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

中也看到我的评论我可能会推荐'：）'请使用'.on'而不是'.live'，它在最新版本中已弃用。所以我希望现在能够解决，对吧？即我将停止阅读您的代码。 '：P' –

@Tats_innit是的，这是解决的谢谢。 – jcubic

耶，快乐'：）'次，也请使用'.on' –

答

演示在这里看见，http://jsfiddle.net/QknuZ/2/（与td.html()）

我希望这回答了你的问题看警告：HTML html()意志取代了元素的内容，而replaceWith（）代替实际元素。

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

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

的replaceWith去除DOM元素，然后再回到会将HTML。

请纠正我，如果我错了，希望这有助于。

图片

enter image description here

太棒了，但为什么这项工作然后http://jsfiddle.net/27c2V/（这是我想要复制这种行为的问题中的代码）。 – jcubic

@jcubic cooleos，我很确定89％的动态html会被添加，比如jsfiddle的文本区域和上面提到的主代码。让我看看你的新小提琴中的代码'：）' –

感谢您的提示，我添加了自己的答案，在按钮处理程序之后执行了td的事件处理程序（由于事件冒泡）。可能replaceWith用DOM元素删除这个事件。 – jcubic

HTML jQuery的功能不工作，但replaceWith确实

相关推荐