contentEditable 仅在关闭并重新打开浏览器后工作

Question

我在这里关注 contentEditable 演示：https://codepen.io/Shokeen/pen/eJRRVw。我的代码与 CSS 和 JS 完全相同，但我对下面的 HTML 做了一些细微的改动：

<div id="wrapper">
<section>
<h1 class="headline">contentEditable Demonstration</h1>

<button id="editBtn" type="button">Edit Document</button>
<div id="editDocument">    
  <h1 id="title">A Nice Heading.</h1>
  <p>Last Edited by <span id="author">Monty Shokeen</span></p>      
  <div id="content">{{temp_df | safe}}</div>
</div>

基本上，我将段落 id="content" 行替换为 div id="content" 行，其中 temp_df 是使用 Flask 框架从 Python 导入的 Pandas 数据 frame.to_html。理想情况下，会显示一个可编辑的表格，就像上面代码笔中的所有其他可编辑项目一样。但是，当我运行它时，该表根本不显示。经过一些测试，我发现有趣的是，如果我运行程序，在浏览器中打开它（不显示表格），然后关闭浏览器，然后重新打开浏览器，表格就会显示出来。我已经在多个浏览器中尝试过这个，所以这可能不是任何浏览器独有的问题。在整个过程中，我还在终端中包含了这些消息。

1 - 当我运行 Flask 程序时

2 - 当我单击网站上的按钮以显示表格时（表格不显示）

3 - 当我关闭浏览器并在新浏览器中重新打开程序时（现在显示表格）

Answer 1

The CodePen demo, modified as described，似乎有效。这是我所做的：

1. 用您问题中的 HTML 替换 HTML。
2. 用简单的 HTML 表格替换 {{temp_df | safe}}。

因此，似乎没有足够的信息来完全回答您的问题。您的问题中未描述的某些内容可能会导致意外行为。

一些想法：

1. 您网站上的按钮的行为显然与 CodePen 演示中的按钮不同。你的按钮有什么作用？
2. temp_df 会生成什么 HTML？
3. 浏览器开发控制台中是否有任何 JavaScript 错误/警告？
4. CodePen 演示的任何部分是否被不当复制？ （复制粘贴错误。）

这是我的最佳猜测：检查与localStorage 相关的代码。这是我们展示的代码中最有可能在运行之间以不同方式运行的部分。

最初的 CodePen 演示使用 localStorage 作为临时“数据库”在浏览器中存储信息。但是，我假设您的网站想要从不是localStorage 的真实数据库中读取和写入数据。

只需删除与localStorage 相关的所有代码即可解决您的问题。