将动态创建的文本区域中的文本存储在 localStorage 中

Question

问题 - 我有 2 个按钮 addNew 和 submitText。我为这两个按钮分别创建了一个 javascript 函数。 addNew 创建具有唯一 ID (note0, note1...) 的文本区域。 submitText 应该以（键，值）格式 (notesList0, data), (notesList1, data) 等提交来自 localStorage 中所有动态创建的文本区域的文本。代码如下-

$(document).ready(function(){
  var note_id = 0;
  $("#addNew").click(function () {
     note_id++;
     var inputField = $('<p align="center"><br><textarea id="note' + note_id + '" placeholder="Enter note, max limit 200 words" class="form-control" rows="5" style="width:80%;overflow:auto;"></textarea></p>');
      $('#textFields').append(inputField);      
  });

  document.getElementById("submitText").addEventListener("click", function(){
     var id=0, counter;
     var flag=true;

     for(counter=0; counter<=note_id; counter++) {
         var textData = document.getElementById("note"+counter).value;
         alert(textData);
         while(flag==true)
         {
             if(localStorage.getItem("notesList"+id)!=null) {
                 id++;
             }
             else {
                 localStorage.setItem("notesList"+id, textData);
                 flag=false;
                 alert("Text saved");
             }
         }
     }
 } , false);
 });

addNew 有效，但 submitText 仅保存第一个文本区域的值。我哪里错了？

Answer 1

对提交函数使用以下代码，使其适用于动态创建的元素：

$(document).on("click", "#submitText", function(){
  // Do stuff
})

确保该 ID 在页面上只使用一次。否则切换到 class 定义。

Answer 2

我想这是因为标志在第一个循环后保持 "false":

$(document).ready(function(){
  var note_id = 0;
  $("#addNew").click(function () {
     note_id++;
     var inputField = $('<p align="center"><br><textarea id="note' + note_id + '" placeholder="Enter note, max limit 200 words" class="form-control" rows="5" style="width:80%;overflow:auto;"></textarea></p>');
      $('#textFields').append(inputField);      
  });

  document.getElementById("submitText").addEventListener("click", function(){
     var id=0, counter;
     var flag=true;

     for(counter=0; counter<=note_id; counter++) {
         var textData = document.getElementById("note"+counter).value;
         alert(textData);
         while(flag==true)
         {
             if(localStorage.getItem("notesList"+id)!=null) {
                 id++;
             }
             else {
                 localStorage.setItem("notesList"+id, textData);
                 flag=false;
                 alert("Text saved");
             }
         }
         flag = true;
     }
 } , false);
 });

Answer 3

$(document).ready(function(){
  var note_id = 0;
  $("#addNew").click(function () {
     note_id++;
     var inputField = $('<p align="center"><br><textarea id="note' + note_id + '" placeholder="Enter note, max limit 200 words" class="form-control" rows="5" style="width:80%;overflow:auto;"></textarea></p>');
      $('#textFields').append(inputField);      
  });

  document.getElementById("submitText").addEventListener("click", function(){
     var id=0, counter;

     for(counter=0; counter<=note_id; counter++) {
         var flag=true;
         var textData = $("#note"+counter).val();
         if(textData != undefined && textData != '') {
            while(flag==true)
         {
          if(localStorage.getItem("notesList"+id)!=null) {
                 id++;
             }
             else {
                 localStorage.setItem("notesList"+id, textData);
                 flag=false;
                 alert("Text saved");
               }
            }
         }
     }
 } , false);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="addNew">Add new</span>
<span id="submitText">Submit</span>
<div id="textFields"></div>

如果您在执行代码时遇到错误，请检查此 link： Failed to read the 'localStorage' property from 'Window'

将动态创建的文本区域中的文本存储在 localStorage 中

Store text from dynamically created textareas in localStorage

html

javascript

jquery

textarea