Question

问题 - 我有2个按钮addNew和submitText。我为这两个按钮中的每一个创建了一个javascript函数。 addNew使用唯一ID (note0, note1...)创建textareas。 submitText应该以（key，value）格式(notesList0, data), (notesList1, data)等方式从localStorage中的所有动态创建的textareas中提交文本，依此类推。代码如下 -

$(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只能保存第一个textarea的值。我哪里错了？

Answer 1

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

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

确保ID仅在页面上使用一次。否则切换到类定义。

Answer 2

我想这是因为旗帜停留＆＃34;假＆＃34;在第一个循环之后：

$(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>

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

在localStorage中存储动态创建的textareas中的文本

3 个答案: