Question

我想捕获div中的元素在用户编辑之后如何更改（因为内容是contentEditable），因此有如下页面：

before_html = $("#example_div").children();
$("#differences_button").on("click",function(){
  after_html = $("#example_div").children();
  console.dir(before_html[0].innerText);
  console.dir(after_html[0].innerText);  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example_div" contentEditable><span id='example_span'>How it starts</span></div>
<button type="button" id="differences_button">Show differences</button>

但是，正如console.dirs所示，“before_html”不存储元素的原始结构，但会在再次运行时显示它的最新结构。

有没有办法在此示例中显示的更改之前存储结构？

我已经尝试过JSON.parse（JSON.stringify（before_html））来存储一些不会更新的内容，这通常在尝试存储您不希望以后更新的javascript变量时起作用，但是无法存储这里应用的内容。

Answer 1

问题是您在点击后访问before_html[0].innerText和after_html[0].innerText。因此，在完成所有更改后，将对它们进行评估。

相反，您可以保存before_html（在附加事件处理程序之前），并使其包含innerHtml或innerText，然后在单击处理程序中与新值进行比较。

before_text = $("#example_div").text();
$("#differences_button").on("click",function(){
  after_text = $("#example_div").text();
  console.dir(before_text);
  console.dir(after_text);  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example_div" contentEditable><span id='example_span'>How it starts</span></div>
<button type="button" id="differences_button">Show differences</button>

_{请注意，我已将变量名称从before_html更改为before_text，因为它不包含HTML。如果您愿意，可以通过调用before_text = $("#example_div").html();来包含HTML。}

编辑前后的元素状态（使用contentEditable）

1 个答案: