动态创建上点击按钮不起作用

Question

我试图通过点击功能动态地创建引导小组的形式，但每个小组应该在点击功能通过创建多种形式。在我的代码的第一个面板通过点击按钮创建形式，但面板不创建形式的休息..

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>

Answer 1

这是因为：

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

}); 

件作品静态HTML，动态HTML中使用。对（的情况下），如：

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

}); 

Answer 2

您可以尝试在动态HTML定义onclick事件像

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

现在你可以创建一个JavaScript功能，它现在一直工作现在问题的HTML是静态或动态

function myFunction(){ 
//do something 
}