时间戳

首页 > 解决方案 > 在一种方法中调用 JQuery 的 html() 函数两次不起作用

javascript - 在一种方法中调用 JQuery 的 html() 函数两次不起作用

问题描述

我的目标是在单击按钮时替换两个表格行的内容。我尝试使用 JQuery 的html 函数，但我似乎无法在同一个方法调用中调用该函数两次。我在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>

查询：

$(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() 是否有限制，或者我只是错过了什么？

标签： javascriptjqueryhtml

解决方案

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

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

推荐阅读