委托事件来序列化动态输入

时间:2016-03-11 09:31:41

标签: javascript jquery django

Fields

我创建了一个向div添加动态输入的脚本。 我想每次在动态创建的输入中输入一个元素作为json字符串推送到textarea。 我的问题是,当我点击时只添加前两个似乎被序列化的字段。

我想要的是如下所示:

dynamic content

这是我的代码:

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

0 个答案:

没有答案