在一种方法中两次调用JQuery的html（）函数不起作用

Question

My goal is to replace the contents of two table rows on a button click. I attempted this using JQuery's html function , but I cannot seem to call that function twice in the same method call. I tested the following in jsFiddle :

HTML:

<table>
   <tr>
      <td class='textToReplace'>I want to be replaced with an input!</td>
      <td class='theButton'><input type="button" id="test" value="make editable"/></td>
   </tr>
</table>

JQuery:

$(document).on('click', "#test", function(e) {
   $(e.target).closest("td").html('<input type="button" value="cancel edit"/>');
   $(e.target).closest("tr").find('td.textToReplace').html('<input type="text" value="I am now editable!"/>');
});

Please note that in practice the table I'm working with will be an unknown number of rows, which is why I'm using classes and jquery selectors to drill through the dom. Either line of the method works fine in isolation, but in trying to call both, it will only execute the first line. Is there a restriction on calling .html() or am I simply missing something?

Answer 1

Calling .html() replaces the entire DOM subtree with new elements parsed from the HTML.

This means that the old subtree, including e.target , is no longer in the document and is has no such ancestor.

Answer 2

You have two options:

1) Simply change the order

$(document).on('click', "#test", function(e) {
  $(e.target).closest("tr").find('td.textToReplace').html('<input type="text" value="I am now editable!"/>');
  $(e.target).closest("td").html('<input type="button" value="cancel edit"/>');
});

2) Set the parent element before changing the dom:

$(document).on('click', "#test", function(e) {
  var elem = $(e.target).closest("tr");
  $(e.target).closest("td").html('<input type="button" value="cancel edit"/>');
  $(elem).find('td.textToReplace').html('<input type="text" value="I am now editable!"/>');
});