单击动态生成的<a> tag with dynamic id

时间：2018-12-13 07:17:19

标签： javascript jquery twitter-bootstrap

I have a form with a textarea & a text box in 3 cols in a row, I can add more textbox on click, add this row dynamically on click event.

I've done create this row dynamically on click event, but I can't add textbox on click in the dynamically created row.

Can anyone help me with this?

Also if anything is missing in my code & my approach to this, feel free to suggest another way to do this.

I'm using jQuery and Bootstrap.

Here is a 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>

1 个答案:

答案 0 :(得分：-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();
});

因此，您将采用这种方式来生成和删除通用输入，要添加更多行，您就必须采用这种模式，但是您需要进一步调查

相关问题
最新问题