Question

在my todo application here中，我无法在第二次尝试时从动态生成的<textarea>中读取数据。在第一次尝试中，我可以正确阅读它。

您只需单击即可编辑任务。在第一次尝试时，它正常工作并更新localStorage。但是，当我们尝试再次编辑同一个项目时，会将其读作undefined。因此会抛出错误：

Cannot read property 'toLowerCase' of undefined

它在这一行：

if($("#new_data").val().toLowerCase() === item[0].toLowerCase()){  // line # 263

由于某种原因，这两个中的一个^的值为undefined。

我错过了什么？

jsFiddle

修改 重新创建问题：添加新项＆gt;将其编辑为其他内容＆gt;点击其他地方以便保存＆gt;现在再次将其编辑为其他内容并再次点击其他地方＆gt;控制台中应该有错误。我使用的是Chrome v35。

Answer 1

每次致电"focusout enter"时，您似乎都会为#new_data附加一个新的委托事件处理程序。

第一个事件处理程序将正常工作，但第二个（或可能是第三个，第四个等）将始终抛出editItem()异常，因为第一个处理程序已经销毁了undefined元素用这一行：

#new_data

有几种方法可以解决这个问题：

A）将整个事件绑定从editItem函数中拉出，并且只调用一次：

$(element).find('textarea')
          .replaceWith("<p class='item_content'>"+$("#new_data").val()+"</p>");

B）命名事件处理程序并在绑定新事件之前调用function editItem() { /* do stuff */ } $(document).on("focusout enter", "#new_data", function(){ /* do stuff */ });：

.off

和C）我个人最喜欢的 - 不委托

            function focusOutHandler(){ /* do stuff */ }
            $(document).off("focusout enter", "#new_data", focusOutHandler)
                       .on("focusout enter", "#new_data", focusOutHandler);

e.g。 http://jsfiddle.net/5Z67W/

从动态生成的元素读取数据时出错

1 个答案: