jquery - .text() 返回对象 Object

Question

所以我创建了一个简单的购物 list /待办事项应用程序。除了一个令人烦恼的问题之外，它几乎完成了:.text() 不断返回 [object Object] 而不是捕获的输入。

我不明白我做错了什么。为了展示我正在谈论的内容，我添加了我的 JS 脚本:

 $(document).ready(function() {

     addItem();
     deleteAction();
     doneAction();
 });

 function addItem() {

     $("button").click(function() {
     var value = $(".input-form").val();       
         $("ul").append('<li> <span class=\"item-name\">'+value+'</span><span class=\"done\"> done</span><span class=\"delete\"> delete</span></li>');
         $(".input-form").val('');
     });
 }

 function deleteAction() {
     $(".ul-list").on("click", ".delete", function() {
      //   alert("Delete event fired.");
         $(this).closest("li").remove();
     });
 }

 function doneAction() {
     $(".ul-list").on("click", ".done", function() {
      //   alert("Done event fired.")
         $(this).closest("li").toggleClass("strike");
     });
 }

这是我在 CodePen 上的完整代码:http://codepen.io/barackobama/pen/qOrKBp

Answer 1

.name未出现定义，附加到 DOM当.text()调用$(".name").text(value)在 的字符串参数内。 append() ？

尝试设置value在 .append() 的字符串参数内使用+运算符，例如 <span class=\"name\">'+value ;搬家value click 内的变量声明event 来定义它，在 event 处设置； js在初始代码笔设置value当addItem()最初调用 .ready() ，当用户尚未设置值时

 function addItem() {         
     $("button").click(function() {
         var value = $(".input-form").val();
         $("ul").append('<li> <span class=\"name\">'+value
           +'</span><span class=\"done\"> done</span>'
           +'<span class=\"delete\"> delete</span></li>');
         $(".input-form").val('');
     });
 }

codepen http://codepen.io/anon/pen/NGpBBX