html jquery function don't work but replaceWith does

Question

I have realy strange behavior. I have this code (I remove unrelated code).

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

in $('td.translation button') handler td.html('foo'); don't work but td.replaceWith('<td class="translation translated-string">foo</td>'); does. No errors, it simply do nothing.

I try to recreate this behavior using this:

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

but above code work.

I can use replaceWith, but I what to know why html function doesn't work. Anybody know why?

UPDATE: When I add this window.td = td; I can call html from console and it work.

Be more specific than "doesn't work" - does nothing happen, do you get a Javascript error, do you get an unexpected result? — Anthony Grist, Jun 27 '12 at 10:34
What is the expected result? `.html('foo')` will not create a DOM element with the foo class of course... — gdoron, Jun 27 '12 at 10:35
@AnthonyGrist @gdoron It should do `foo` but it don't, nothing happen, when I do `td.replaceWith('foo');` then it change td to foo. In my working code it's inline edit. — jcubic, Jun 27 '12 at 10:38
@AnthonyGrist no errors, and only that one line `td.html('foo');` don't give any results. — jcubic, Jun 27 '12 at 10:41
Very odd. I think we may need to see a jsFiddle that demonstrates the problem. — Anthony Grist, Jun 27 '12 at 10:45
Side note; I would strongly recommend constructing a `string` of HTML before, and then `append`ing it all in one go, from a performance head this is much more preferred. :) — Richard, Jun 27 '12 at 10:52
@Richard In my code I use `visibility: hidden` so browser didn't do reflow. — jcubic, Jun 27 '12 at 10:59

score 1 · Answer 1 · answered Jun 27 '12 at 11:00

1

See demo here and watch the alert with http://jsfiddle.net/QknuZ/2/ (with td.html())

I hope this answers your question: HTML html() will replaces the contents of the element, while replaceWith() replaces the actual element.

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

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

The replaceWith removes the element from DOM, and then adds the html back again.

Please please correct me if I am wrong, hope this helps.

Image

enter image description here

answered Jun 27 '12 at 11:00

Tats_innit

33,991
10
71
77

Great, but why this work then http://jsfiddle.net/27c2V/ (it's the code in the question where I want to replicate this behavior). – jcubic Jun 27 '12 at 11:07
@jcubic cooleos, I am 89 % sure its to do with the way dynamic html is getting appended i.e. compare the text area of the jsfiddle with the main code you got above. Let me read the code in your new fiddle `:)` – Tats_innit Jun 27 '12 at 11:10
Thanks for you hint, I add my own answer, event handler for td was executed (because of the event bubbling) after button handler. Probably replaceWith remove this event with the DOM element. – jcubic Jun 27 '12 at 11:15
@jcubic Glad it helped, yes `replaceWith` defo (100%) `removes the content from DOM` http://api.jquery.com/replaceWith/ `:)` also see my comment below in your post – Tats_innit Jun 27 '12 at 11:17

score 0 · Accepted Answer · answered Jun 27 '12 at 11:13

0

Using hint from @Tats_innit I put alert('call') to $('td.translation').live('click' and it was executed when I click the button. First it execute button handler (it change html and alert message box) and then invoke handler for td and create textarea again.

answered Jun 27 '12 at 11:13

jcubic

61,973
54
229
402

Also if I may recommend `:)` please use `.on` instead of `.live` it is deprecated in latest version. So I hope this is resolved now, right? i.e. I will stop reading your code. `:P` – Tats_innit Jun 27 '12 at 11:14
Yay, happy `:)` times, also please use `.on` – Tats_innit Jun 27 '12 at 11:20

html jquery function don't work but replaceWith does

2 Answers2