Javascript <；部门>；具有可编辑的内容'；不要马上改变，只有第二次

我有两个

，两个内容都可以通过数据库中的值进行编辑。
它可以显示和更改它们，但只能在第二次使用。
e、 g:

• 单击#stuff div
• 提醒我DB中的值（类似于“天气正常”）
• 我将其更改为“新值”
• 在div外单击
• 函数提醒我来自#stuff div的值（仍然“天气正常”）
• 再次在div内单击，它现在会提醒我“新值”

这导致必须进入div两次，才能接受更改。
我尝试手动打开带有参数的save.php，它直接保存了
我很确定这是我所缺少的一些基本的东西，但我现在还不能弄清楚

HTML:

<div id="test-container" style="border: 1px solid green;">
    <div id="editable" contentEditable="true">
        <?php echo $rst["content"]; ?>
    </div>

    <div id="stuff" contentEditable="true">
        <?php echo $rst["stuff"]; ?>
    </div>

    <button id="save">Save Changes</button>
</div>

---

我在您的代码中发现的问题是：

更新键盘输入后，DOM不可变

试试这个：-

var content = "";
var from = "";

$("#editable, #stuff").click(function (e) {
    content = $(this).html();
    from = $(this.id);    
    console.log(content);
    e.stopPropagation();
});

$(document).click(function() {
    console.log(content);
});
$("#editable, #stuff").keyup(function(){
  content = $(this).html();
  from = $(this.id);
});

---

提示：如果。。。否则在

中单击事件处理程序。
content=$（“#可编辑”）.html（）
=
content=$（this.html（）
）。同样的情况也适用于
#stuff
。此外，您是否将事件处理程序包装为
document ready
？我不确定他还能检测到哪些选择器被触发。。或者JS是自动完成的？编辑：否，不包装您已将事件处理程序（
单击
）附加到选择器。如果可能有多个（在您的场景中，可能有2个元素），此选择器将返回给您哪个元素接收了事件。
var content = "";
var from = "";

$("#editable, #stuff").click(function (e) {
    content = $(this).html();
    from = $(this.id);    
    console.log(content);
    e.stopPropagation();
});

$(document).click(function() {
    console.log(content);
});
$("#editable, #stuff").keyup(function(){
  content = $(this).html();
  from = $(this.id);
});