Question

当用户单击添加按钮时，我试图动态生成最大数量的5个切换按钮以形成jquery脚本。代替切换按钮，显示了普通复选框。谁能帮助我解决这个问题，我想知道如何为每个切换按钮提供唯一的ID。

  <html>
<body>
    <div class="insurance-check-form></div>
     <button class="btn btn-link" id="add-more"><i class="fas fa-plus head2 p-1 
      border round"></i></button>


    <script>
  $(document).ready(function(){
         var max_fields = 5;
         var field_wrapper = $(".insurance-check-form");       
         var add_button = $("#add-more");
         var ins_company_count = 1;

         $(document).on("click","#add-more",(function(e){
             e.preventDefault();
             if(ins_company_count < max_fields){
                 $(field_wrapper).append('<div class="row mt-5"> <div class="col-md-2"> <select name="insurance" class="custom-select"> <option selected>Custom Select Menu</option> <option value="volvo">ICCI Prudential</option> <option value="fiat">Blue Star</option> <option value="audi">Edelwiss Tokyo</option> </select> </div><div class="col-md-3"> <input type="checkbox" data-toggle="toggle" data-style="slow" data-width="250" data-height="35" data-on="Click to Unsubmit" data-off="Click to Submit" data-onstyle="primary" data-offstyle="secondary" id="clearance-check"><br><span class="head3" data-toggle="popover" data-trigger="hover" data-content="Click here to add a notes"> <button class="btn btn-link" data-toggle="modal" data-target="#igl-sub-modal" data-backdrop="static" data-keyboard="false"> <i class="far fa-file-alt head3 text-gray"></i></button> </div><div class="col-md-3"> <input type="checkbox" data-toggle="toggle" data-style="slow" data-width="250" data-height="35" data-on="Click to Unsubmit" data-off="Click to Submit" data-onstyle="primary" data-offstyle="secondary" id="clearance-check"><br><span class="head3" data-toggle="popover" data-trigger="hover" data-content="Click here to add a notes"> <button class="btn btn-link" data-toggle="modal" data-target="#igl-sub-modal" data-backdrop="static" data-keyboard="false"> <i class="far fa-file-alt head3 text-gray"></i></button> </div><div class="col-md-3"> <input type="checkbox" data-toggle="toggle" data-style="slow" data-width="250" data-height="35" data-on="Click to Unsubmit" data-off="Click to Submit" data-onstyle="primary" data-offstyle="secondary" id="clearance-check"><br><span class="head3" data-toggle="popover" data-trigger="hover" data-content="Click here to add a notes"> <button class="btn btn-link" data-toggle="modal" data-target="#igl-sub-modal" data-backdrop="static" data-keyboard="false"> <i class="far fa-file-alt head3 text-gray"></i></button> </div><a href="#" class="remove_field"><i class="fas fa-times-circle brand-color head2"></i></a></div>');
                  ins_company_count++;
                  $('head').append(' <link href="../assets/libs/css/bootstrap4-toggle.min.css" rel="stylesheet">');

             }
         }))
})
</script>
</body>
</html>

样式不适用于使用jquery动态生成的切换按钮

0 个答案: