使用jquery获取动态创建的元素的值(代码片段)

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

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

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

动态或不是DOM中的元素是相同的。 JQuery是JavaScript，不能用JavaScript做些什么。 JavaScript主要是关于DOM，DOM是关于元素，属性和属性的HTML。所以div没有属性.value，而是你要使用Javascript .innerHTML（甚至是outerHTML），你可以通过.html（）或.text（）来访问JQuery，你想要操作纯HTML（谁' DOM中的重新对象）或文本。 .value属性是关于HTML表单标记中的输入或此类元素。希望这对你有所帮助。

jquery获取动态修改后的data值，data()函数不能获取最新的数据(代码片段)

...我需要动态的修改data-name对应的值但是动态修改过以后，使用data(‘name‘)方法，一直都是以前的值。动态修改后，无法获取最新值-----解决办法1.使用console.dir()打印当前数据具体信息，会发现，当前对象中，有最新的数据信息。... 查看详情

jquery自学笔记(代码片段)

文章目录一、动态创建元素二、jQuery添加结点的几种方式2.1append()2.2prepend()2.3after()2.4before()2.5appendTo()三、清空节点与移除节点四、克隆节点五、val()方法：设置/获取表单内容一、动态创建元素1、原生js创建节点document.createElem... 查看详情

利用ajax动态生成元素jquery无法获取新创建的元素的解决方法

问题描述：当利用ajax技术动态创建元素时，jQuery无法获取到元素①创建元素ajax代码：$.ajax(url:/users/getdata,method:post,dataType:json,success:function(data)lettemp=;console.log(data);//遍历data数据for(vark=0;k<data.length;k++)console.lo 查看详情

如何在后面的代码中获取使用 Raduploader 动态创建的文本框的值？

】如何在后面的代码中获取使用Raduploader动态创建的文本框的值？【英文标题】：HowtogetthevalueofthetextboxwhichcreateddynamicallywiththeRaduploaderincodebehind?【发布时间】：2013-01-3116:54:06【问题描述】：我使用AsyncUpload<telerik:RadAsyncUploadrunat... 查看详情

jquery中的attr方法(代码片段)

1、根据参数个数不同，作用不同attr作用：获取或者设置属性结点的值可以传递一个参数也可以传递两个参数如果传递一个参数代表获取属性结点的值如果传递两个参数代表设置属性结点的值注意：如果是获取，无论找到多少个... 查看详情

如何使用 JQuery 动态获取 Body 元素高度

】如何使用JQuery动态获取Body元素高度【英文标题】：HowtogetBodyelementheightdynamicallyusingJQuery【发布时间】：2010-11-2020:19:00【问题描述】：当我调整浏览器窗口大小时，我需要获取正文元素的高度和宽度请帮我用JQuery解决这个问题【... 查看详情

使用 jQuery 动态创建对象

】使用jQuery动态创建对象【英文标题】：DynamicallycreateobjectwithjQuery【发布时间】：2018-07-1417:58:51【问题描述】：我想动态创建一个对象数组。该数组将被称为“组”。它将包含未知数量的对象（这些是组名称），这些对象将由元... 查看详情

dom中动态创建元素与jquery中动态创建元素

DOM中动态创建元素与jQuery中动态创建元素DOM中动态创建元素：　　1.document.write("标签的代码")  缺点：页面中原有的元素会被覆盖掉　　2.innerHTML　　3.document.createElement("标签的名称")jQuery中动态创建元素：　　1.$("标签的... 查看详情

如何使用jquery通过.load通过跨域获取HTML元素的值

】如何使用jquery通过.load通过跨域获取HTML元素的值【英文标题】：howtogetvalueofHTMLelementvia.loadviacrossdomainusingjquery【发布时间】：2014-08-2017:34:33【问题描述】：如何通过跨域通过.load函数获取HTML元素的价值？.load功能完美，但不知... 查看详情

jquery(html,[ownerdocument])详解(代码片段)

...一个图像地址)，还有反斜杠。当你创建单个元素时，请使用闭合标签或XHTML格式。例如，创建一个span，可以用$("<span/>")或$("<span></span>")，但不推荐$("<span>")。在jQuery中，这个语法等同于$(document.createElement("span"))... 查看详情

如何将我的jquery插件应用于动态创建的元素(代码片段)

我正在构建一个动态生成部分元素的应用程序，其样式为便利贴。我正在配置此应用程序采取jQuery插件的形式。生成部分的功能很好，但我无法在部分上呈现我的默认插件样式选项。基本上，我的插件似乎不适用于我动态创建的... 查看详情

如何使用 jquery 创建具有来自动态创建的表单字段的值的多维数组？

】如何使用jquery创建具有来自动态创建的表单字段的值的多维数组？【英文标题】：Howtocreateamultidimensionalarraywithvaluesfromdynamicallycreatedformfields,usingjquery?【发布时间】：2021-04-2609:47:10【问题描述】：我有一个表单，我可以在其中... 查看详情

如何在 jQuery 中获取动态创建的输入的单选值

...:50:15【问题描述】：我遇到了一个问题，就是无法获取我使用php生成的查询中的函数创建的输入值。首先，我生成一个函数，根据检查的收音机显示正确的内容。某种子级别的选择。这工作正常，但它似乎没有注册为DOM元素。这... 查看详情

如何查找已动态创建且存在于另一个元素中的选择下拉列表的值和 ID

...lement【发布时间】：2020-11-0816:26:29【问题描述】：我尝试使用jquery动态创建一个矩形，并在创建矩形后向其附加selectdro 查看详情

jquery实现jquery元素选中状态(代码片段)

在实现jquery获取元素时，使用了//错误代码，使用$符选中的元素时，获取的是jquery元素，checked属性是jsdom的属性值，$("select").checked=checked;之后使用了$("select").attr("checked",true/false);但是只有在第一次使用时有效，所以就使用了$("se... 查看详情

jquery获取当前按钮截取字符串字符串拼接动态循环添加元素(代码片段)

截取字符串；字符串拼接；动态循环添加元素：获取当前按钮：data:null,render:function(data,type,row)varloginName=$("#loginName").val();vardiv=$("<divclass=‘btn-group‘></div>");varbutton1=$("<buttonrole=‘download‘val 查看详情

jqjq动态绑定事件.on()解绑事件off()(代码片段)

...动态创建的DOM元素并不能响应之前绑定的事件！解绑事件使用.unbind()方法；　　旧版本的处理方法是使用.live()方法来代替事件绑定.bind()，使得绑定的事件能适用脚本创建的新元素，从而实现事件的动态绑定；解绑事 查看详情

jquery样式属性元素操作动画效果尺寸位置操作(代码片段)

文章目录jQuery样式操作操作CSS方法设置样式类方法jQuery属性操作操作元素固有属性操作元素自定义属性数据缓存jQuery元素操作jQuery内容文本值遍历、创建、添加、删除元素jQuery动画效果显示隐藏滑动和事件切换淡入淡出自定义动... 查看详情