jQuery实现网页便签编辑模态框无法读取新增笔记内容问题求助

问题定位 #

你的静态HTML里预设的笔记，标题<h2>带note-title类、内容<p>带note-text类，而JS中动态生成新笔记（包括新增功能创建、编辑后保存生成的笔记）时，拼接的DOM模板没有给<h2>、<p>添加对应的类名。
你点击编辑按钮时是通过.find(".note-title")、.find(".note-text")获取当前笔记的内容，动态生成的元素不存在对应类，自然取不到值，编辑弹窗就会显示为空。

修复方案 #

修改JS中两处动态生成笔记的模板代码即可：

1. 找到.add-note点击事件的代码，修改创建笔记的模板：

// 修改前
var $input = $('<div class="notes"> <p class="close">x</p> <h2>' + title + '</h2> <p>' + texts + '</p> <button class="to-edit">Edit Note</button> </div>');
// 修改后
var $input = $('<div class="notes"> <p class="close">x</p> <h2 class="note-title">' + title + '</h2> <p class="note-text">' + texts + '</p> <button class="to-edit">Edit Note</button> </div>');

2. 找到.edit-note点击事件的代码，同样修改创建笔记的模板：

// 修改前
var $input = $('<div class="notes"> <p class="close">x</p> <h2>' + title + '</h2> <p>' + texts + '</p> <button class="to-edit">Edit Note</button> </div>');
// 修改后
var $input = $('<div class="notes"> <p class="close">x</p> <h2 class="note-title">' + title + '</h2> <p class="note-text">' + texts + '</p> <button class="to-edit">Edit Note</button> </div>');

另外你HTML中新增笔记的textarea标签里有冗余的enter code here字符，可以直接删掉，避免影响输入体验。

内容的提问来源于stack exchange，提问作者Rainer's