Question

我的目标是在单击按钮时替换两个表行的内容。我尝试使用JQuery的html function进行此操作，但似乎无法在同一方法调用中两次调用该函数。我在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!"/>');
});

请注意，实际上，我正在使用的表的行数是未知的，这就是为什么我使用类和jquery选择器来浏览dom的原因。该方法的每一行都可以单独工作，但是在尝试调用两者时，它只会执行第一行。调用.html（）有限制吗？还是我只是缺少一些东西？

Answer 1

调用.html()会将整个DOM子树替换为从HTML解析的新元素。

这意味着旧的子树（包括e.target）不再存在于文档中，并且也没有这样的祖先。

Answer 2

您有两个选择：

1）只需更改顺序

$(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）在更改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!"/>');
});

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

2 个答案: