我创建了一个向div添加动态输入的脚本。 我想每次在动态创建的输入中输入一个元素作为json字符串推送到textarea。 我的问题是,当我点击时只添加前两个似乎被序列化的字段。
我想要的是如下所示:
这是我的代码:
$(document).ready(function() {
// Number of params
var index = 0;
function addParams() {
var tmp_template = $('template').clone();
var paramsDiv = $('#params');
paramsDiv.append(tmp_template.html());
$($('[class$="param-x"]')[index]).attr('name', 'param' + (index + 1));
$($('[class$="value-x"]')[index]).attr('name', 'value' + (index + 1));
index = index + 1;
}
addParams();
$('#addParam').on('click', function() {
addParams();
});
$('#params_div').on('click', "input", function(event) {
event.preventDefault()
$('#id_params').text(JSON.stringify($('#params_div :input'). serializeJSON()));
});
});
<div class="col-md-6">
<div class="row">
<div id="params_div" class="col-md-10">
<div style="text-align:center">
<label class="col-md-4">Param</label>
<label class="col-md-6">Value</label>
</div>
<div id="params"></div>
<!-- The template for adding new field -->
<template>
<div class="form-group">
<div class="col-md-4">
<input type="text" class="form-control param-x" placeholder="Task" />
</div>
<div class="col-md-6">
<input type="text" class="form-control value-x" placeholder="Task" />
</div>
</div>
<div class="col-md-10">
<hr>
</div>
</template>
</div>
<div class="col-md-2">
<label class="col-md-2">Add</label>
<button id="addParam" type="button" class="btn btn-default addButton" name="add_field">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</div>
<div id="id_params"></div>