Question

我正在使用jquery动态创建输入元素，但是当我尝试访问动态创建的元素值时，得到的是empty或undefined或。我尝试了多种方法来获取值，但失败了。

有人可以帮我完成此事吗？

这是代码

$(document).ready(function() {
  var count = 0;
  var jsondata = [];
  var selectedField;
  $('.add').click(function() {
    count = count + 1;
    jQuery('<div/>', {
      id: 'form-wrapper' + count,
      class: 'form-wrapper' + count,
      title: 'now this div has a title!'
    }).appendTo('.wrapper0');
    $('.form-wrapper' + count).append("<label>FieldName</label> <input type='text' placeholder='label' id='label" + count + "'></input> <select class='select" + count + "'><option>Select</option><option value='textbox'>Textbox</option><option value='textarea'>TextArea</option><option value='checkbox'>Checkbox</option><option value='radio'>Radio</option><option value='date'>Date</option> </select><input type='text' id='commavalues" + count + "' disabled placeholder='Enter comma(,) seperated values'></input><input type='checkbox' id='required" + count + "'>Required</input><button class='delete'>Delete</button> <br><br>");

    $('.delete').click(function(e) {
      ($(this).parent().remove());
    });

    $('.select' + count).change(function() {
      selectedField = $(this).children('option:selected').val();
      if (selectedField == 'checkbox' || selectedField == 'radio') {
        $('#commavalues' + count).prop('disabled', false);
        flag = 1;
      } else {
        flag = 0;
        $('#commavalues' + count).prop('disabled', true);
      }
    });
    item = {};

    var label = $('#label' + count).val();
    var required = $('#required' + count).is(":checked");
    var label_type = selectedField;
    var options = $('#commavalues' + count).val();

    console.log(label);
    console.log(required);
    console.log(label_type);
    console.log(options);

    item["label"] = label;
    item["label_type"] = label_type;
    item["options"] = options;
    item["required"] = required;
    jsondata.push(item);
  });

  $('.save').click(function() {
    console.log(jsondata);
  });
});

body {
  background-color: #ECEFF1;
  margin: 50px 0;
  padding: 0;
  text-align: center;
}

button {
  position: relative;
  margin-left: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper0">
  <div class="form-wrapper">
    <label>FieldName</label>
    <input type="text" placeholder="label" class="label0"></input>
    <select class="select0">
      <option>Select</option>
      <option value="textbox">Textbox</option>
      <option value="textarea">TextArea</option>
      <option value="checkbox">Checkbox</option>
      <option value="radio">Radio</option>
      <option value="date">Date</option>
    </select>
    <input type="text" class="commavalues0" disabled placeholder="Enter comma(,) seperated values"></input>
    <input type="checkbox" class="required0">Required</input>
    <br><br>
  </div>
</div>
<button class="add">Add</button>
<button class="save">Save</button>

单击save按钮时，我试图以JSON格式显示，如果单击删除按钮，则与该输入字段关联的数据也将被删除。

Answer 1

一个问题是您所有的闭包都使用相同的count变量，每次添加另一个元素时该变量都会递增。每个封闭都需要一个局部变量。

但是最好完全摆脱该变量。只需为它们提供相同的类，然后使用事件委托将其绑定到动态添加的元素。有关详细说明，请参见Event binding on dynamically created elements?。

另一个问题是，您在添加元素时获取值，而不是在用户单击“保存”按钮时获取值。发生这种情况时，您需要遍历所有元素。

$(document).ready(function() {
  $('.add').click(function() {
    var form_wrapper = jQuery('<div/>', {
      class: 'form-wrapper',
      title: 'now this div has a title!',
      html: "<label>FieldName</label> <input type='text' placeholder='label' class='label'></input> <select class='select'><option>Select</option><option value='textbox'>Textbox</option><option value='textarea'>TextArea</option><option value='checkbox'>Checkbox</option><option value='radio'>Radio</option><option value='date'>Date</option> </select><input type='text' class='commavalues' disabled placeholder='Enter comma(,) seperated values'></input><input type='checkbox' class='required'>Required</input><button class='delete'>Delete</button> <br><br>"
    }).appendTo('.wrapper0');

  });

  $('.save').click(function() {
    var jsondata = $(".form-wrapper").map(function() {
      var label = $(this).find(".label").val();
      var required = $(this).find(".required").is(":checked");
      var label_type = $(this).find(".select").val();
      var options = $(this).find(".commavalues").val();

      return {
        label,
        required,
        label_type,
        options
      };
    }).get();
    console.log(jsondata);
  });

  $(".wrapper0").on("click", ".delete", function(e) {
    ($(this).parent().remove());
  });

  $(".wrapper0").on("change", '.select', function() {
    var selectedField = $(this).val();
    if (selectedField == 'checkbox' || selectedField == 'radio') {
      $(this).siblings('.commavalues').prop('disabled', false);
    } else {
      $(this).siblings('.commavalues').prop('disabled', true);
    }
  });
});

body {
  background-color: #ECEFF1;
  margin: 50px 0;
  padding: 0;
  text-align: center;
}

button {
  position: relative;
  margin-left: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper0">
  <div class="form-wrapper">
    <label>FieldName</label>
    <input type="text" placeholder="label" class="label"></input>
    <select class="select">
      <option>Select</option>
      <option value="textbox">Textbox</option>
      <option value="textarea">TextArea</option>
      <option value="checkbox">Checkbox</option>
      <option value="radio">Radio</option>
      <option value="date">Date</option>
    </select>
    <input type="text" class="commavalues" disabled placeholder="Enter comma(,) seperated values"></input>
    <input type="checkbox" class="required">Required</input>
    <br><br>
  </div>
</div>
<button class="add">Add</button>
<button class="save">Save</button>

Answer 2

嘿，我已经修复了未定义的错误，并且似乎按预期工作。您可以在脚本中替换以下代码。

<script>
$(document).ready(function(){
   var count = 0;
   var jsondata=[];
   var selectedField;
   $('.add').click(function(){
      jQuery('<div/>', {
         id: 'form-wrapper'+count,
         class: 'form-wrapper'+count,
         title: 'now this div has a title!'
      }).appendTo('.wrapper0');
      $('.form-wrapper'+count).append("<label>FieldName</label> <input type='text' placeholder='label' class='label"+(count+1)+"'></input> <select class='select"+(count+1)+"'><option>Select</option><option value='textbox'>Textbox</option><option value='textarea'>TextArea</option><option value='checkbox'>Checkbox</option><option value='radio'>Radio</option><option value='date'>Date</option> </select><input type='text' class='commavalues"+(count+1)+"' disabled placeholder='Enter comma(,) seperated values'></input><input type='checkbox' class='required"+(count+1)+"'>Required</input><button class='delete'>Delete</button> <br><br>");

      $('.delete').click(function(e){
         ($(this).parent().remove());
      });
      item = {};

      var label = $('.label'+count).val();
      var required = $('.required'+count).prop("checked");
      var label_type = selectedField;
      var options = $('.commavalues'+count).val();

      console.log(label);
      console.log(required);
      console.log(label_type);
      console.log(options);

      item["label"] = label;
      item["label_type"] = label_type;
      item["options"] = options;
      item["required"] = required;
      jsondata.push(item);
      count++;
   });

   $('.save').click(function(){
      console.log(jsondata);
   });
   $('.select'+count).on('change', function(){
         selectedField = $(this).find('option:selected').text();
         if(selectedField == 'checkbox' || selectedField == 'radio'){
           $('#commavalues'+count).prop('disabled', false);
           flag = 1;
        }
       else{
            flag = 0;
            $('#commavalues'+count).prop('disabled', true);
       }
    });
});
</script>

Answer 3

在动态上与DOM中的元素是否相同。 jQuery是JavaScript，不能使用JavaScript进行其他操作。 JavaScript主要是关于DOM的，而DOM是关于元素，属性和特性的HTML。因此，没有div的.value属性，相反，您必须使用Javascript .innerHTML（甚至是externalHTML），因为您要操作纯HTML（谁可以在.Query（。反对DOM）或文本。 .value属性与HTML表单标签中的输入或此类元素有关。希望对您有所帮助。

使用Jquery获取动态创建的元素的值

3 个答案: