Dynamically create forms the on Click button not working

Question

i am trying to create Bootstrap Panel dynamically by on click function but every Panel should create multiple forms by on click function.. In my code the first Panel create forms by clicking on button but the rest of panels doesn't create forms..

    var counter=1;
    $(".panel-increment").on("click", function(e){
       e.preventDefault();
        var panelHtml = '<div class="panel panel-info"> ' +
                '<div class="panel-heading"> ' +
                '<h4 class="panel-title"> ' +
                '<a data-toggle="collapse" data-parent="#accordion" href="#collapse' + (counter + 1) + '">Day ' + (counter + 1) + '<i class="fa fa-plus pull-right" aria-hidden="true"></i></a></h4>' +
                '</div> ' +
                '<div id="collapse' + (counter + 1) + '" class="panel-collapse collapse"> ' +
                '<div class="panel-body">' +
                '<div class="row" > ' +
                '<div class="col-md-12 sch-box">' +
                '<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"></div> ' +
                '<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"></div> ' +
                '<div class="col-md-12 form-group"><input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"></div> ' +
                '<div class="col-md-12 form-group"><textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea></div> ' +
                '</div> ' +
                '</div> ' +
                '</div> ' +
                '<button type="button" class="btn center-block panel-addbtn" ><i class="fa fa-plus"></i> </button> ' +
                '</div> ' +
                '</div>';
        $(this).closest(".it-right-side").find(".panel-group").append(panelHtml);
        counter++;
    });
 
    $(".panel-addbtn").on("click", function(e){
        e.preventDefault();
        var formHtml = '<div class="row" >' +
                '<div class="col-md-12 sch-box"> ' +
                '<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"></div>' +
                '<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"></div>' +
                '<div class="col-md-12 form-group"><input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"></div>' +
                '<div class="col-md-12 form-group"><textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea></div>' +
                '</div>' +
                '</div>';
        $(this).closest(".panel-collapse").find(".panel-body").append(formHtml);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 it-right-side">
  <div>
    <div class="col-md-12" id="dynamicInput">
      <!--Start Panel-->
      <div class="panel-group" id="accordion">
          <div class="panel panel-info">
             <div class="panel-heading">
               <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Day 1
<i class="fa fa-plus pull-right" aria-hidden="true"></i></a></h4>
             </div>
             <div id="collapse1" class="panel-collapse collapse">
               <div class="panel-body" id="formcreation">
                <!--Schedule-->
                 <div class="row" >
                  <div class="col-md-12 sch-box">
                    <div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"></div>
                   <div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"></div>
                   <div class="col-md-12 form-group"><input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"></div>
                   <div class="col-md-12 form-group"><textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea></div>
            </div>
          </div>
       </div>
<button type="button" class="btn center-block panel-addbtn" ><i class="fa fa-plus"></i> </button>
    </div>
   </div>
 </div>
</div>
<!--End panel-->
</div>
 <button type="button" class="btn center-block panel-increment"><i class="fa fa-plus"></i> </button>
</div>

Its working fine. Check the fiddle. https://jsfiddle.net/ryqzct3f/ Also check which library you are missing. and check the console also — Code Lღver, Feb 15 '17 at 08:21

score 2 · Accepted Answer · answered Feb 15 '17 at 08:09

2

This is because:

$("selector").on("click", function(){

});

works for static html, in case of dynamic html use .on() like:

$("document").on("click", ".panel-addbtn", function() {

});

answered Feb 15 '17 at 08:09

Mayank Pandeyz

23,243
3
29
52

thanks its work perfectly .. – Jamal Ahmad Feb 15 '17 at 08:18

score 1 · Answer 2 · answered Feb 15 '17 at 08:15

1

You can try defining an onclick event in the dynamic html like

<div onclick="myFunction()">
</div>

now you can create a javascript function and it would always work now matter the html is static or dynamic

function myFunction(){
//do something
}

answered Feb 15 '17 at 08:15

geekbro

1,035
10
10

Dynamically create forms the on Click button not working

2 Answers2