在網頁上用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打印數組

回答

相關問題