在点击动态生成的 <a> 标记时添加元素，带有动态 id

Question

我有一个表单，其中包含一个文本区域和一个连续 3 列的文本框，我可以在点击时添加更多文本框，在点击事件时动态添加这一行。

我已经在点击事件上动态创建了这一行，但我无法在动态创建的行中添加点击文本框。

谁能帮我解决这个问题？

此外，如果我的代码和我的处理方法中缺少任何内容，请随时提出另一种方法。

我正在使用 jQuery 和 Bootstrap。

这是JSFiddle

var count = 3;
$(document).on('click', '#addpv1', function () {
    var appendTxt = "<div class='form-group'><input type='text' class='form-control m-b-10' placeholder='Parameter Value' name='para_ans1[]' id='para_ans" + count + "'><small class='form-text'><a href='javascript:void(0);'id='removemanager'>Remove</a></small></div>"
    $("#addpvdynamic").append(appendTxt);
    count++;
    console.log(count)
});

$(document).on('click', '#removemanager', function (e) {
    $(this).closest("div").remove();
});
var count = 3;
$(document).on('click', '#addprv1', function () {
    var appendTxt = "<div class='form-group'><input type='text' class='form-control m-b-10' placeholder='Parameter Value' name='para_ans1[]' id='para_ans" + count + "'><small class='form-text'><a href='javascript:void(0);'id='removemanager'>Remove</a></small></div>"
    $("#addprvdynamic").append(appendTxt);
    count++;
    console.log(count)
});

$(document).on('click', '#removemanager', function (e) {
    $(this).closest("div").remove();
});
var count = 3;
$(document).on('click', '#addprmv1', function () {
    var appendTxt = "<div class='form-group'><input type='text' class='form-control m-b-10' placeholder='Parameter Value' name='para_ans1[]' id='para_ans" + count + "'><small class='form-text'><a href='javascript:void(0);'id='removemanager'>Remove</a></small></div>"
    $("#addprmvdynamic").append(appendTxt);
    count++;
    console.log(count)
});

$(document).on('click', '#removemanager', function (e) {
    $(this).closest("div").remove();
});


$(document).ready(function () {
    var max_fields = 30; //maximum input boxes allowed
    var wrapper = $("#dynamic"); //Fields wrapper
    var add_button = $("#addparas1"); //Add button ID
    var x = 1;
    var pq = 3;
    var pa = 3;
    var pp = 3;
    $(add_button).click(function (e) { //on add input button click

        e.preventDefault();
        if (x < max_fields) { //max input box allowed
            x++; //text box increment
            pq++;
            pa++;
            pp++;
            var $newSelects = $('<div class="row"><div class="col-md-4"> <div class="form-group"> <textarea type="text" name="parameter[]" parsley-trigger="change" required placeholder="Parameter" class="form-control m-b-10" id="pn1" rows="2"></textarea> <input type="text" class="form-control m-b-10" required placeholder="Parameter Value" name="para_ans1[]" id="pv1"> <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans1[]" id="pv2"> <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans1[]" id="pv3"> <a href="javascript:void(0);" id="addpv1' + pq + '"><small>Add parameter values</small></a> <div id="addpvdynamic"> </div></div></div><div class="col-md-4"> <div class="form-group"> <textarea type="text" name="parameter[]" parsley-trigger="change" required placeholder="Parameter" class="form-control m-b-10" id="pn2" rows="2"></textarea> <input type="text" class="form-control m-b-10" required placeholder="Parameter Value" name="para_ans5[]" id="prv1"> <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans5[]" id="prv2"> <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans5[]" id="prv3"> <a href="javascript:void(0);" id="addprv1' + pa + '"><small>Add parameter values</small></a> <div id="addprvdynamic"> </div></div></div><div class="col-md-4"> <div class="form-group"> <textarea type="text" name="parameter[]" parsley-trigger="change" required placeholder="Parameter" class="form-control m-b-10" id="pn3" rows="2"></textarea> <input type="text" class="form-control m-b-10" required placeholder="Parameter Value" name="para_ans9[]" id="prmv1"> <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans9[]" id="prmv2"> <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans9[]" id="prmv3"> <a href="javascript:void(0);" id="addprmv1' + pp + '"><small>Add parameter values</small></a> <div id="addprmvdynamic"> </div></div></div><a href="javascript:void(0);" id="remove-pararow">Remove</a></div>')
            wrapper.append($newSelects);

            console.log(pq);
            console.log(pa);
            console.log(pp);
        }

    });
    $(wrapper).on("click", "#remove-pararow", function (e) { //user click on remove text
        e.preventDefault();
        $(this).parent('div').remove();

    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="row">
    <div class="col-md-12"><label>Create Parameters</label></div>
    <div class="col-md-4">
        <div class="form-group">
            <textarea type="text" name="parameter[]" parsley-trigger="change" required placeholder="Parameter" class="form-control m-b-10" id="pn1" rows="2"></textarea>
            <input type="text" class="form-control m-b-10" required placeholder="Parameter Value" name="para_ans1[]" id="pv1">
            <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans1[]" id="pv2">
            <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans1[]" id="pv3">
            <a href="javascript:void(0);" id="addpv1"><small>Add parameter values</small></a>
            <div id="addpvdynamic">

            </div>
        </div>

    </div>
    <div class="col-md-4">
        <div class="form-group">
            <textarea type="text" name="parameter[]" parsley-trigger="change" required placeholder="Parameter" class="form-control m-b-10" id="pn2" rows="2"></textarea>
            <input type="text" class="form-control m-b-10" required placeholder="Parameter Value" name="para_ans5[]" id="prv1">
            <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans5[]" id="prv2">
            <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans5[]" id="prv3">
            <a href="javascript:void(0);" id="addprv1"><small>Add parameter values</small></a>
            <div id="addprvdynamic">

            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <textarea type="text" name="parameter[]" parsley-trigger="change" required placeholder="Parameter" class="form-control m-b-10" id="pn3" rows="2"></textarea>
            <input type="text" class="form-control m-b-10" required placeholder="Parameter Value" name="para_ans9[]" id="prmv1">
            <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans9[]" id="prmv2">
            <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans9[]" id="prmv3">
            <a href="javascript:void(0);" id="addprmv1"><small>Add parameter values</small></a>
            <div id="addprmvdynamic">

            </div>
        </div>

    </div>
    <div class="col-md-12">
        <a href="javascript:void(0);" id="addparas1">Add more</a>
    </div>
</div>
<div class="" id="dynamic">

</div>

Answer 1

你的代码是一团糟，是一个很好的例子，你可以在 js 中出错，但仍然可以实现某种工作结果。 我想您需要深入了解如何解析 javascript 以及何时在哪个上下文中执行哪些代码，例如您的多个 var count 定义是无意义的，据我所知，您根本不需要计数。 但我不会深入研究所有这些错误，

我认为您在概念上做错的事情是添加动态事物并为其编写静态代码。 你的工作是保持通用的通用性。

为您提供快速入门，如果您有以下标记：

<div class="col-md-4">
    <div class="form-group">


        <input name="para_ans1[]" id="para_ans1_1" type="text" class="form-control m-b-10" required placeholder="Parameter Value" >
        <input name="para_ans1[]" id="para_ans1_2" type="text" class="form-control m-b-10" placeholder="Parameter Value" >
        <input name="para_ans1[]" id="para_ans1_3" type="text" class="form-control m-b-10" placeholder="Parameter Value" >


        <a data-id="ans1" class="addParameterValue"  href="javascript:void(0);"><small>Add parameter values</small></a>
        <div class="dynamic" data-id="ans1">

        </div>
    </div>

</div>


.....

你只需要两个通用函数来添加和删除

$(document).on('click', '.addParameterValue', function () {
    var current_id = $(this).attr('data-id');

    // use the actual amount of dynamic added inputs in the _current_ form-group
    var current_count = $(this).parent().find('input').length;

    // for readability i splitted up the appendTxt, look how everything necessary is parametrized
    var inp_txt = " <input name='para_'"+current_id+"[]' type='text' class='form-control m-b-10' placeholder='Parameter Value' >";

    // and the removelink has a class now too and referrences the input above
    var rmv_lnk = "<a data-removeid='para_"+current_id+"_"+current_count+"' class='removemanager' href='javascript:void(0);' >Remove</a>"
    var appendTxt = "<div class='form-group' id='para_"+current_id+"_"+current_count+"'>"+inp_txt+"<small class='form-text'>"+rmv_lnk+"</small></div>";

    // finally add it to the current row´s dynamic container
    $('.dynamic[data-id="'+current_id+'"]').append(appendTxt);
});

// and your generic remove function
$(document).on('click', '.removemanager', function () {
    var remove_id = $(this).attr('data-removeid');
    $('#'+remove_id).remove();
});

所以你这种方式将生成和删除输入泛型，添加更多行你必须适​​应这种模式，但进一步调查是你的一部分