javascript - 动态创建表单单击按钮不起作用

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 6 年前。

我正在尝试通过单击功能动态创建 Bootstrap 面板，但每个面板都应该通过单击功能创建多个表单。在我的代码中，第一个面板通过单击按钮创建表单，但其余面板不创建表单..

    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，请使用 .on() ，例如:

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

});