在网页上用jQuery打印数组

我最近学会了jQuery，并且想用它创建一个小的待办事项列表。但是我被卡在这里，因为我无法继续将我声明的数组打印到HTML文档中。在网页上用jQuery打印数组

无法真正找出原因，不胜感激！

下面的代码：http://jsfiddle.net/xbili/vwjp2/4/

我真的不明白为什么不这项工作：

for (var i = 1; i <= x; ++i) { 
    $("main").text(toDoList[i]); 
};

来源

2013-07-12 xbili

看起来像* *替换了每个循环的'

'元素的内容，而不是附加到它。 – apsillers

如果你看小提琴，他确实有

标签，我的第一个想法是主标签上的井号标签，直到我看到主标签为止...首先我看到了

标签。 – MrB

当点击一个动态添加的按钮时，循环被执行...但是事件在...之前被注册了，所以这是问题。 –

更改代码：

$(document).ready(function() { 
    $(".navButtonTBD, .navButtonD").click(function() { 
     $("main").html('<input class="inputBar" type="text" placeholder="what to do?" /> <input class="toDoIt" type="submit" value="To-Do it!" />'); 

    }); 

    $(document).on("click", ".toDoIt" , function() { 
      $("main").append("<p>" + $(".inputBar").val() + "</p>"); 
     }); 

});

这里是fiddle

您的原件上有几个错误代码，例如：

$(".inputBar").val()=toDoList[x];

我想你想的存储值在数组中，但是这不是怎么做，你可能已经改用：

toDoList.push($(".inputBar").val());

然而，没有一个真正的需要做到这一点，你可以只保留追加到您的cointainer使用：

$("main").append("<p>" + $(".inputBar").val() + "</p>");

来源

2013-07-12 15:20:52 isJustMe

这仍然是错误的，在事件处理程序中附加一个事件处理程序等。 – adeneo

你是对的，我修复了嵌套处理程序 – isJustMe

我想我明白你的意思了。但是没有将事件处理程序嵌套到另一个事件处理程序的原因是什么？ – xbili

继承人与你的最终目标工作版本小提琴是：

JSFIDDLE

我通过添加游标样式来清理css，但我保留了html。

$(document).ready(function() { 
    var toDoList = []; 
    $(".navButtonTBD").click(function() { 
     $("main").html('<input class="inputBar" type="text" placeholder="what to do?" /> <input class="toDoIt" type="submit" value="To-Do it!" />') 
    }); 

    $(document.body).on('click', '.toDoIt', function() { 

     toDoList.push($('.inputBar').val()); 
     var newhtml = ""; 
      for(var i=0;i<toDoList.length;i++) { 
       newhtml += toDoList[i]+"<br>"; 
      }; 
      //Print out toDoList below 
      $("main").html(newhtml); 
     }); 

});

来源

2013-07-12 15:26:40 Rooster

在网页上用jQuery打印数组

回答

相关问题