javascript - 无法获取动态添加的文本

Question

我的 jQuery 代码有问题。我无法访问动态添加的元素。如果我刷新页面就可以访问它。

我正在开发一个 jQuery/HTML5 待办事项列表应用程序。在 my code here ，如果您添加一个项目并点击“标记为完成”(将鼠标悬停在编号按钮上后)，该项目将从 UI 中删除，但不会从 localStorage 中删除。该代码无法找到任务内容(JS 第 180 行)。

var remove_item_text = $(element).next().text();    // not fetching the text

它显示为空白，并且实际上并未从 localStorage 中删除。如果刷新页面，该项目会再次显示。现在，如果您点击“标记为完成”，该元素将从本地存储中删除。这不是很奇怪吗？

我在这里缺少什么？

jsFiddle

Answer 1

问题是新添加的项目没有包装到 <p class='item_content'> 中标签。因此.next()无法获取该元素，也无法获取其文本(接下来考虑元素节点并跳过文本节点)。

因此要修复它，您应该在 addItem 内附加一个新项目方法如下:

$("ul").append("<li class='ui-state-default'><button class='done'>Done</button>"+
               "<p class='item_content'>" + $("#new_todo_item").val() + "</p>" +
               "<input type='checkbox' class='star' "+checked+" />"+
               "<label for='star'>Star</label>");

(与 checkLocalStorageExistingData 方法相同)。

演示:http://jsfiddle.net/csTS7/46/